Vue 输入标签元素 - 如何正确填充标签？

Question

我正在使用 vue 元素 <input-tag>，我需要为一个包含标签的实体制作编辑页面。所以 <input-tag> 字段应该根据实体中的当前值来填充。我设法做到了，但整个 JSON 对象出现在 <input-tag> 字段中（例如：{"id":2, "tagName": "vuejsproblem", "newsId": 1}），而不仅仅是 tagName 它应该是的。

还有，在console里报错，不知道为什么，因为this.tags显然不是"":

[Vue warn]: Invalid prop: type check failed for prop "value". Expected Array, got String with value "".

found in

---> <InputTag>

这是我的vue页面的代码：

<template>
  <div class="pt-5">
    <form @submit.prevent="editNews">


        <div id="app">
        <label for="tags">Tags</label>
  <input-tag placeholder="Add Tag" v-model.trim="tags"></input-tag>
        <br>
        </div>

      <button type="submit" class="btn btn-primary mt-2">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "EditNews",
  data() {
    return {
      tags: '',
    }
  },
    beforeMount () {
    this.$axios.get(`/api/news/${this.$route.params.id}`,{
      id: this.$route.params.id,
      }).then((response) => {
      this.tags = response.data.tags;
    });   
/*     this.tags.forEach(element => element.tagName);
 */
    },
  methods: {
    editNews() {
      this.message = '';
      if(this.tags.length > 1) {
          console.log(this.tags)
      this.$axios.post(`/api/news/${this.$route.params.id}`, {
        tags: this.tags,
      }).then(
            data => {
              this.message = data.message;
            },
            error => {
              this.message = error.response.data
              alert(this.message);      
            });

      }
    },
  },
}
</script>

<style scoped>

</style>

Answer 1

根据我从你的问题中可以理解的内容（如果我没听错的话），你可以使用 vuejs 的渲染助手来做到这一点，这取决于你试图实现这个 v2 或 v3 的版本

在 v2 中，您可以执行以下操作： https://github.com/vubular/elements/blob/master/src/text/Plain.vue 使用 this._v 你可以直接绑定组件插槽中的内容，或者你可以在传递内容之前用任何 html 标签包装，例如 this._v('<span>'+this.content+'</span>')，你也可以将标签定义为prop 然后渲染 prop 而不是硬编码标签。

同时，在 v3 中，您可以 return 从 vue 导入的 h 助手： render() { return h('span', {}, this.transformedContent); },。同样，您可以在子组件上下文中接受 span/tag 作为道具。

这样做时，您不需要为您的组件定义 <template>，这样您就可以使用 vue 助手渲染组件（然后它会处理 DOM 交互）。

Answer 2

正如here所说，标签必须是数组。所以，将标签定义为 data() 中的数组，例如：

data() {
   return {
      tags: [],
   }
}

另外 response.data.tags 必须是像 [ "Jerry", "Kramer", "Elaine", "George" ] 和 here 这样的数组。

您可以将 response.data.tags 转换为仅包含 tagName 的数组，方法是：this.tags = response.data.tags.map(x => x.tagName)

Vue 输入标签元素 - 如何正确填充标签？

Vue input tag element - how to fill it with tags properly?

arrays

tags

input

vue.js