javascript v-绑定菜单值中的数组，但获取数组中的单个项

hmmo2u0o 于 2023-01-19 发布在 Java

关注(0)|答案(3)|浏览(84)

希望你们都能帮忙。
我有一个下拉菜单，我正在使用v-bind分配一个数组给所选的值。

<select v-model="selected" name="SKU[]"   @onChange>
  <option v-for="infos in data" v-bind:value="{ level: infos.stockLevel, SKU: infos.SKU }"  @change="onChange($event)" >{{infos.SKU}} </option>
</select>

有多个菜单，我将所选选项存储在SKU[]中，然后通过post将它们传递给表单。
问题是我的控制器现在阅读SKU[]如下：

array:2 [▼
  0 => "[object Object]"
  1 => "[object Object]"
]

我想将infos.SKU存储在SKU[]中，而不是object object中。
你知道我该怎么做吗？

JavaScript

来源：https://stackoverflow.com/questions/75155430/v-bind-an-array-in-a-menu-value-but-get-individual-item-in-the-array

3条答案

按热度按时间

2izufjch1#

你不能在html中存储javascript对象。你只能在那里使用字符串，所以你应该用你的对象调用JSON.stringify()方法，然后传入值。然后你就可以在JSON.parse()之后将它作为一个对象使用。但是最好的情况是使用另一个vue组件作为选项，或者在值中只传递对象的id

赞(0）回复(0）举报 2023-01-19

cu6pst1q2#

可以直接传递选中的v-model属性，然后将数据对象压入SKU数据变量，而不是在@change事件中传递事件。
现场演示**：**

new Vue({
  el: '#app',
  data: {
    data: [{
      stockLevel: 'Level 1',
      SKU: 'SKU 1'
    }, {
      stockLevel: 'Level 2',
      SKU: 'SKU 2'
    }, {
      stockLevel: 'Level 3',
      SKU: 'SKU 3'
    }, {
      stockLevel: 'Level 4',
      SKU: 'SKU 4'
    }],
    selected: '',
    SKU: []
  },
  methods: {
    onChange(selectedValue) {
      if (!JSON.stringify(this.SKU).includes(JSON.stringify(selectedValue))) {
        this.SKU.push(selectedValue);
      }
      console.log(this.SKU);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selected" @change="onChange(selected)">
    <option 
            v-for="(infos, index) in data" 
            :key="index" 
            v-bind:value="{ level: infos.stockLevel, SKU: infos.SKU }"
            >
      {{infos.SKU}} 
    </option>
  </select>
</div>

赞(0）回复(0）举报 2023-01-19

2skhul333#

首先，我不确定您是如何管理多重选择的，因为如果不使用multiple属性或任何其他方式，一次只有一个值显示为选中，这从“多重选择UI”的Angular 来看似乎很模糊。
其次，没有@onchange语法，它应该是onchange或@change。
第三，@change事件应该在select元素上触发，而不是在option元素上触发。
最后，您的v-model是用来绑定所选元素的，那么为什么不使用它来跟踪所选元素呢？
这是演示版-

<html>
  <div id="app">
    {{ SKU }}<br>
    <select v-model="selected" @change="onChange">
      <option
        v-for="infos in data"
        :value="{ level: infos.stockLevel, SKU: infos.SKU }"
        >{{ infos.SKU }}
      </option>
    </select>
  </div>
  <!-- Don't forget to include Vue from CDN! -->
  <script src="https://unpkg.com/vue@2"></script>
  <script>
    new Vue({
      el: "#app", //Tells Vue to render in HTML element with id "app"
      data() {
        return {
          SKU: [],
          selected: null,
          data: [{
              stockLevel: "Stock level 1",
              SKU: "SKU 1",
            },
            {
              stockLevel: "Stock level 2",
              SKU: "SKU 2",
            },
          ],
        };
      },
      methods: {
        onChange() {
          // Do not push if already exists. I assumed "SKU" was a unique property.
          if (this.SKU.find(item => item.SKU == this.selected.SKU)) return;

          this.SKU.push(this.selected)
        },
      },
    });
  </script>
</html>

赞(0）回复(0）举报 2023-01-19

我来回答

javascript v-绑定菜单值中的数组，但获取数组中的单个项

3条答案

相关问题

热门标签

最新问答