Question

我试图将一个select标签的多个值添加到数组中。到目前为止，在模板中我有这个：

<label>
    {{ $t('posts_categories') }}
    <select v-model="post.post_categories" multiple>
        <option v-for="post_category in post_categories" :value="post_category.id">
            {{ post_category.title }}
        </option>
    </select>
</label>

然后，在逻辑部分中，我有：

     export default {
         data () {
          return {
            post: null,
            post_categories: [],
      }
    },
    methods: {
      load: function (id) {
        this.post = null

        if (id && typeof id !== 'undefined') {
          Post
            .find(id)
            .then(response => {
              this.post= response
            })
        } else {

          // Here I am fetching all the post categories from database.

          PostCategory.get().then(response => {
            this.post_categories = response.data
          })

          this.post = new Post({})
        }
      },

      submit: function (redirect) {
        this.post.save()
          .then(() => {
            if (redirect === true) {
              this.abort()
            }
          })
      }
    },
    watch: {
      '$route' (to, from) {
        this.load(to.params.id)
      },
    },
    mounted () {
      this.load(this.$route.params && this.$route.params.id)
    }
      }

我想做的是在select标签中显示所有“帖子类别”，并且当用户单击其中的任何一个时，它将它们添加到数组中。

到目前为止，我可以看到选项（post_categories），但单击时仅添加一项，换句话说，数组中始终只有一项，而我最后单击的一项。我也收到此警告：

 [Vue warn]: <select multiple v-model="post.post_categories"> expects an 
 Array 
 value for its binding, but got Undefined

这也是...

  Error in directive model componentUpdated hook: "TypeError: Cannot read 
  property 'some' of undefined"

注意：我不知道“某些”是从哪里来的。

Answer 1

您正在尝试从数据中的Set-Content对象访问post_categories，但是您已经在填充post数据数组，因此将其分配为post_categories因此（即，将model指令中的post.post_categories更改为post_categories）

v-model

如何将来自select元素的所有多个值作为Vue-js中的数组？

1 个答案: