如何在Vue中使用foreach值获取动态嵌套Select的数据 [英] How to get data of dynamically nested Select using foreach values in Vue

查看：18
本文介绍了如何在Vue中使用foreach值获取动态嵌套Select的数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在动态填充数据并尝试显示它.

我正在获取 Select 元素的选项 ID，但我不确定如何获取父元素.

我尝试添加 hidden 输入，但无法获取值但无法获取值(已知问题)

new Vue({el: "#app",数据() {返回 {变化 : [{身份证":1，"variationName":"材料","created_at":"2020-08-20T16:23:18.000000Z","updated_at":"2020-08-20T16:23:18.000000Z",variant_options":[{身份证":1，"variants_id":1,"variationOptionName":"塑料","created_at":"2020-08-20T16:45:15.000000Z","updated_at":"2020-08-20T16:45:15.000000Z"},{身份证":2，"variants_id":1,"variationOptionName":"木头","created_at":"2020-08-20T16:45:45.000000Z","updated_at":"2020-08-20T16:45:45.000000Z"},{身份证":3，"variants_id":1,"variationOptionName":"玻璃","created_at":"2020-08-20T16:46:23.000000Z","updated_at":"2020-08-20T16:46:23.000000Z"},{身份证":4，"variants_id":1,"variationOptionName":"pvc","created_at":"2020-08-20T16:47:15.000000Z","updated_at":"2020-08-20T16:47:15.000000Z"},{身份证":5，"variants_id":1,"variationOptionName":"未知","created_at":"2020-08-20T16:47:58.000000Z","updated_at":"2020-08-20T16:47:58.000000Z"}]},{身份证":2，"variationName":"颜色","created_at":"2020-08-20T16:25:14.000000Z","updated_at":"2020-08-20T16:25:14.000000Z",variant_options":[]},{身份证":3，"variationName":"类型","created_at":"2020-08-20T16:25:45.000000Z","updated_at":"2020-08-20T16:25:45.000000Z",variant_options":[{身份证":6，"variants_id":3,"variationOptionName":"工作","created_at":"2020-08-20T16:48:44.000000Z","updated_at":"2020-08-20T16:48:44.000000Z"}]}],变化选项:[]，};},挂载:函数(){for (让 i = 0; i < this.variations.length; i++) {this.variationOptions.push({值:[]，});}},方法: {}，})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><div><table class="table"><头><tr><td>变体名称</td><td>变化值</td></tr></thead><tr v-for="(items,index) 变体"><td>{{items.variationName}}</td><td><select multiple class="form-control" id="exampleFormControlSelect2" v-model="variationOptions[index]['values']"><option v-for="(variationOptions,index) in items.variant_options" :key="variationOptions.id" :value="variationOptions.id">{{variationOptions.variationOptionName}}</option></选择></td>{{variationOptions}}</tr></tbody>

我也收到以下错误.

 *渲染错误:TypeError:无法读取未定义的属性值""*

我哪里错了.如果您能花点时间解释一下，我将不胜感激

更新:

我已经用 item.id 更新了 values 并按照我的预期获取了数据.

但是格式是

 [ { "items": { "id": [] } }, { "items": { "id": [] } }, { "items": { ";id": [] } } ]

如何从结果中删除项目和 ID.

小提琴

解决方案

我创建了一个对我来说更合乎逻辑的片段:

  • 它通过 variationName 动态构造选定的值(因此适用于任意数量的变体)

  • 能够将整个选定的 variant_options 对象传递给选择:

>{{ option.variationOptionName }}</选项>

new Vue({el: "#app",计算:{变化选项数组(){返回 Object.values(this.variationOptions)}},数据() {返回 {变化: [{身份证":1，"variationName": "材料","created_at": "2020-08-20T16:23:18.000000Z","updated_at": "2020-08-20T16:23:18.000000Z",variant_options":[{身份证":1，"variants_id": 1,"variationOptionName": "塑料","created_at": "2020-08-20T16:45:15.000000Z","updated_at": "2020-08-20T16:45:15.000000Z"},{身份证":2，"variants_id": 1,"variationOptionName": "木头","created_at": "2020-08-20T16:45:45.000000Z","updated_at": "2020-08-20T16:45:45.000000Z"},{身份证":3，"variants_id": 1,"variationOptionName": "玻璃","created_at": "2020-08-20T16:46:23.000000Z","updated_at": "2020-08-20T16:46:23.000000Z"},{身份证":4，"variants_id": 1,"variationOptionName": "pvc","created_at": "2020-08-20T16:47:15.000000Z","updated_at": "2020-08-20T16:47:15.000000Z"},{身份证":5，"variants_id": 1,"variationOptionName": "未知","created_at": "2020-08-20T16:47:58.000000Z","updated_at": "2020-08-20T16:47:58.000000Z"}]},{身份证":2，"variationName": "颜色","created_at": "2020-08-20T16:25:14.000000Z","updated_at": "2020-08-20T16:25:14.000000Z",variant_options":[{身份证":1，"variants_id": 1,"variationOptionName": "橙色","created_at": "2020-08-20T16:45:45.000000Z","updated_at": "2020-08-20T16:45:45.000000Z"},{身份证":2，"variants_id": 2,"variationOptionName": "红色","created_at": "2020-08-20T16:45:45.000000Z","updated_at": "2020-08-20T16:45:45.000000Z"},]},{身份证":3，"variationName": "类型","created_at": "2020-08-20T16:25:45.000000Z","updated_at": "2020-08-20T16:25:45.000000Z",variant_options":[{身份证":6，"variants_id": 3,"variationOptionName": "工作","created_at": "2020-08-20T16:48:44.000000Z","updated_at": "2020-08-20T16:48:44.000000Z"}]}],变体选项:{}，};},安装:功能(){for (让 i = 0; i < this.variations.length; i++) {Vue.set(this.variationOptions, this.variations[i].variationName, [])}}})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><div>作为对象:{{variationOptions }}<br/>作为数组:{{variationOptionsArray}}<表格><头><tr><th>变体名称</th><th>变化值</th><th>选定的</th></tr></thead><tr v-for="(item, idxi) 变体" :key="`item-${ idxi }`"><td>{{ item.variationName }}</td><td><选择多个 v-model="variationOptions[item.variationName]"><option v-for="(option, idxj) in item.variant_options" :key="`options-${ idxi }-${ idxj }`" :value="option.variationOptionName">{{ option.variationOptionName }}</选项></选择></td><td>{{variationOptions[item.variationName] }}</td></tr></tbody>

最大的区别是我没有将选定的值存储在 Array 中，而是在 Object 中 - 但我也在 computed 中提供了这些值数组格式更方便.

I am dynamically populating the data and trying to display it.

I am getting the option id's of the Select elements, but I am not sure how do I get the parent element.

I tried to add hidden input but I cannot get value but I was not able to get the value(known issue)

new Vue({
  el: "#app",
 data() {
    return {
    variations : [
   {
      "id":1,
      "variationName":"Material",
      "created_at":"2020-08-20T16:23:18.000000Z",
      "updated_at":"2020-08-20T16:23:18.000000Z",
      "variant_options":[
         {
            "id":1,
            "variants_id":1,
            "variationOptionName":"Plastic",
            "created_at":"2020-08-20T16:45:15.000000Z",
            "updated_at":"2020-08-20T16:45:15.000000Z"
         },
         {
            "id":2,
            "variants_id":1,
            "variationOptionName":"Wood",
            "created_at":"2020-08-20T16:45:45.000000Z",
            "updated_at":"2020-08-20T16:45:45.000000Z"
         },
         {
            "id":3,
            "variants_id":1,
            "variationOptionName":"glass",
            "created_at":"2020-08-20T16:46:23.000000Z",
            "updated_at":"2020-08-20T16:46:23.000000Z"
         },
         {
            "id":4,
            "variants_id":1,
            "variationOptionName":"pvc",
            "created_at":"2020-08-20T16:47:15.000000Z",
            "updated_at":"2020-08-20T16:47:15.000000Z"
         },
         {
            "id":5,
            "variants_id":1,
            "variationOptionName":"unknown",
            "created_at":"2020-08-20T16:47:58.000000Z",
            "updated_at":"2020-08-20T16:47:58.000000Z"
         }
      ]
   },
   {
      "id":2,
      "variationName":"color",
      "created_at":"2020-08-20T16:25:14.000000Z",
      "updated_at":"2020-08-20T16:25:14.000000Z",
      "variant_options":[
         
      ]
   },
   {
      "id":3,
      "variationName":"type",
      "created_at":"2020-08-20T16:25:45.000000Z",
      "updated_at":"2020-08-20T16:25:45.000000Z",
      "variant_options":[
         {
            "id":6,
            "variants_id":3,
            "variationOptionName":"working",
            "created_at":"2020-08-20T16:48:44.000000Z",
            "updated_at":"2020-08-20T16:48:44.000000Z"
         }
      ]
   }
],
      variationOptions: [],
    };
  },
  mounted: function () {
    for (let i = 0; i < this.variations.length; i++) {
      this.variationOptions.push({
        values: [],
      });
    }
  },
  methods: {},
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <table class="table">
      <thead>
        <tr>
          <td>Variation Name</td>
          <td>Variation Values</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(items,index) in variations">
          <td>{{items.variationName}}</td>
          <td>
            <select multiple class="form-control" id="exampleFormControlSelect2" v-model="variationOptions[index]['values']">
              <option v-for="(variationOptions,index) in  items.variant_options" :key="variationOptions.id" :value="variationOptions.id">{{variationOptions.variationOptionName}}</option>
            </select>
          </td>
          {{variationOptions}}
        </tr>
      </tbody>
    </table>
  </div>
</div>

Also I am getting the following error.

 *Error in render: "TypeError: Cannot read property 'values' of undefined"*

Where am I wrong. I would appreciate if you could take a moment to explain

Update:

I have updated the values with item.id and getting the data as I expect.

But the format is

 [ { "items": { "id": [] } }, { "items": { "id": [] } }, { "items": { "id": [] } } ]

How do I remove the items and id from the result.

Fiddle

解决方案

I created a snippet that is a bit more logical to me:

<option
  v-for="(option, idxj) in item.variant_options"
  :key="`options-${ idxi }-${ idxj }`"
  :value="option.variationOptionName"
  <!-- if you set it to :value="option",
  then the whole object is passed -->
>
  {{ option.variationOptionName }}
</option>


new Vue({
  el: "#app",
  computed: {
    variationOptionsArray() {
      return Object.values(this.variationOptions)
    }
  },
  data() {
    return {
      variations: [{
          "id": 1,
          "variationName": "Material",
          "created_at": "2020-08-20T16:23:18.000000Z",
          "updated_at": "2020-08-20T16:23:18.000000Z",
          "variant_options": [{
              "id": 1,
              "variants_id": 1,
              "variationOptionName": "Plastic",
              "created_at": "2020-08-20T16:45:15.000000Z",
              "updated_at": "2020-08-20T16:45:15.000000Z"
            },
            {
              "id": 2,
              "variants_id": 1,
              "variationOptionName": "Wood",
              "created_at": "2020-08-20T16:45:45.000000Z",
              "updated_at": "2020-08-20T16:45:45.000000Z"
            },
            {
              "id": 3,
              "variants_id": 1,
              "variationOptionName": "glass",
              "created_at": "2020-08-20T16:46:23.000000Z",
              "updated_at": "2020-08-20T16:46:23.000000Z"
            },
            {
              "id": 4,
              "variants_id": 1,
              "variationOptionName": "pvc",
              "created_at": "2020-08-20T16:47:15.000000Z",
              "updated_at": "2020-08-20T16:47:15.000000Z"
            },
            {
              "id": 5,
              "variants_id": 1,
              "variationOptionName": "unknown",
              "created_at": "2020-08-20T16:47:58.000000Z",
              "updated_at": "2020-08-20T16:47:58.000000Z"
            }
          ]
        },
        {
          "id": 2,
          "variationName": "color",
          "created_at": "2020-08-20T16:25:14.000000Z",
          "updated_at": "2020-08-20T16:25:14.000000Z",
          "variant_options": [{
              "id": 1,
              "variants_id": 1,
              "variationOptionName": "Orange",
              "created_at": "2020-08-20T16:45:45.000000Z",
              "updated_at": "2020-08-20T16:45:45.000000Z"
            },
            {
              "id": 2,
              "variants_id": 2,
              "variationOptionName": "Red",
              "created_at": "2020-08-20T16:45:45.000000Z",
              "updated_at": "2020-08-20T16:45:45.000000Z"
            },
          ]
        },
        {
          "id": 3,
          "variationName": "type",
          "created_at": "2020-08-20T16:25:45.000000Z",
          "updated_at": "2020-08-20T16:25:45.000000Z",
          "variant_options": [{
            "id": 6,
            "variants_id": 3,
            "variationOptionName": "working",
            "created_at": "2020-08-20T16:48:44.000000Z",
            "updated_at": "2020-08-20T16:48:44.000000Z"
          }]
        }
      ],
      variationOptions: {},
    };
  },
  mounted: function() {
    for (let i = 0; i < this.variations.length; i++) {
      Vue.set(this.variationOptions, this.variations[i].variationName, [])
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    As Object: {{ variationOptions }}<br />
    As Array: {{ variationOptionsArray }}
    <table>
      <thead>
        <tr>
          <th>Variation Name</th>
          <th>Variation Values</th>
          <th>Selected</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, idxi) in variations" :key="`item-${ idxi }`">
          <td>
            {{ item.variationName }}
          </td>
          <td>
            <select multiple v-model="variationOptions[item.variationName]">
              <option v-for="(option, idxj) in item.variant_options" :key="`options-${ idxi }-${ idxj }`" :value="option.variationOptionName">
                {{ option.variationOptionName }}
              </option>
            </select>
          </td>
          <td>
            {{ variationOptions[item.variationName] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

The biggest difference is that I didn't store the selected values in an Array but in an Object - but I provided the values also in an computed Array format for more convenience.

这篇关于如何在Vue中使用foreach值获取动态嵌套Select的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆