Question

基本上我想要实现的是从服务器获取数据并在嵌套的json中显示数据以在Multiselect中显示，Vue-Multiselect

显示后，我可以根据需要添加新标签（能够更新）。

我能够从嵌套的json中获取对象以在multiselect中显示，但我不确定如何自定义它以仅显示名称。

当前行为：

所以预期的行为是，只有沙发，桌子和椅子应该在多选中显示：

有没有办法让我只显示如上图所示？

实现@ Ikbel获取json对象并仅显示所需名称的方法。现在我有另一个问题，即每当我向其添加新标签时，我都会获得重复的选项。

这是我的Vue代码：

   <template>
       <multiselect :multiple="true"
       v-model="data.subCategoryNames"
       :hide-selected="true"
       :selected="data.subCategoryNames"
       :options="computedSubCategoryNames"
       :taggable="true"
       @tag="addTag"
        >
        </multiselect>
  </template>


  methods: {
    addTag (newTag) {
      // this.options.push(newTag)
      this.data.subCategoryNames.push(newTag)
    }
  }



computed: {
    computedSubCategoryNames () {
      return this.allSubCategoryNames.map((item) => {
        this.options.push(item.subCategoryName)
        this.data.subCategoryNames.push(item.subCategoryName)
        return item.subCategoryName
      })
    }
  }

显示了这一点：

感谢您的帮助！

Answer 1

好的@mary。这是一个更好的解决方案。只需将label="subCategoryName"添加到多选组件，使其仅显示subCategoryName而不是整个对象。所以不需要计算属性。

应该使用

track-by来避免重复值。

这是一个有效的例子。

＆＃13;

let Multiselect = VueMultiselect.Multiselect

let vm = new Vue({
  el: '#app',
  data: {
    data: {
      subCategoryNames: [],
      options: [
        {subCategoryName: 'Chair', count: 2},
        {subCategoryName: 'Table', count: 5},
      ],
    },
  },   
 
  components: { 
    Multiselect 
  },
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<script src="https://unpkg.com/vue-multiselect@2.0.0"></script>

<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.0.0/dist/vue-multiselect.min.css">


<div id="app">        
  <multiselect :multiple="true"
       v-model="data.subCategoryNames"
       :hide-selected="true"
       :selected="data.subCategoryNames"
       :options="data.options"
       :taggable="true"
       label="subCategoryName"
       track-by="subCategoryName"
        >
        </multiselect>
        
   {{data.subCategoryNames}}
</div>

＆＃13;

Answer 2

使用计算属性提取子类别名称。这是你如何做到的。

将多选options绑定到计算出的subCategoryNames。我们将其称为computedSubCategoryNames，并使用数组方法map()从subCategoryName中提取subCategoryNames。这是一个例子：

<multiselect :options="computedSubCategoryNames">
</multiselect>

在定义computedSubCategoryNames：

computed: {
  // Returns ['Chair', 'Sofa', 'Table']
  computedSubCategoryNames() {
    return this.subCategoryNames.map(function(item) {
      return item.subCategoryName
    }) 
  }
}

Answer 3

请参考下面的URL，onether方法在android中显示多选下拉菜单 https://asnehal.wordpress.com/2012/04/03/multi-select-drop-down-list-in-android/

从嵌套的json获取数据并使用Vue-Multiselect显示

3 个答案: