我有一個數字欄位，我想從這樣的陣列中系結值：

<div v-for="p in products">
    <input type="number" :value="carModel[p.name]" />
</div>

其中 p.name 是一個字串（產品名稱）， car_a ：

const app = Vue.createApp({
        data() {
            return {
                products: {...},
                carModel:[{car_a:4}, {car_b:2} ]
            }
        }
...

但這不起作用，輸入保持為空，而以下運行沒有問題：

<div v-for="p in products">
    <input type="number" :value="carModel" />
</div>

const app = Vue.createApp({
        data() {
            return {
                products: {...},
                carModel:4
            }
        }
...

所以，我的問題是，如果我有密鑰，如何正確系結陣列中的值？

謝謝

uj5u.com熱心網友回復：

首先，我想知道您的 carModel 陣列項物件結構是否可以改進；也許更好的是：

  products: ["car_a", "car_b"],
  carModel: [
    {
      name: "car_a",
      value: 4,
    },
    {
      name: "car_b",
      value: 2,
    },
    {
      name: "car_c",
      value: 3,
    },
  ]

我假設 products 陣列中保存的字串是物件 carModel 陣列中字串的子集，并且由于您想要一個與資料反應的輸入，您將希望輸入的模型是由保存的值每個 carModel 物件。因此，不是在 products 陣列上進行 v-for 回圈，而是在 carModel 上進行 v-for 回圈，但會過濾掉 products 陣列中不包含其字串的元素。因為我們不應該將 v-for 和 v-if 結合起來，所以這個過濾應該在一個計算屬性中完成：

  computed: {
    filteredCarModel() {
      return this.carModel.filter(cm => {
        return this.products.includes(cm.name);
      });
    }
  },

所以然后在 HTML 模板中，您可以遍歷計算的屬性：

    <div v-for="cm in filteredCarModel" :key="cm.name">
      <label :for="cm.name">{{ cm.name }} </label>
      <input type="number" :id="cm.name" v-model="cm.value" />
    </div>

這是關鍵：

這將在輸入元素中顯示正確的值，并且這些元素將保持對模型的反應，因此對輸入的更改將導致資料模型的更改，反之亦然。因此，顯示將真正系結到資料模型，這就是您所要求的以及 Vue.js 的全部內容。

這是一個示例 HTML，顯示資料實際上是反應性的：

Vue js，如何系結陣列中的輸入值？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <html>
    <head>
      <meta charset=utf-8" />

      <title>Vue Example</title>
      <script src="https://unpkg.com/vue@next"></script>
    </head>

    <body>
      <h1>Vue Example</h1>
      <div id="app">
        <h2>Show Data</h2>
          <div v-for="cm in carModel" :key="cm.name">
            {{ cm.name }} : {{ cm.value }}
          </div>
        <h2>Change Data</h2>
        <div v-for="cm in filteredCarModel" :key="cm.name">
          <label :for="cm.name">{{ cm.name }} </label>
          <input type="number" :id="cm.name" v-model="cm.value" />
        </div>
      </div>
      <script>
        Vue.createApp({
          data() {
            return {
              products: ["car_a", "car_b"],
              carModel: [
                {
                  name: "car_a",
                  value: 4,
                },
                {
                  name: "car_b",
                  value: 2,
                },
                {
                  name: "car_c",
                  value: 3,
                },
              ],
            };
          },
          computed: {
            filteredCarModel() {
              return this.carModel.filter((cm) => {
                return this.products.includes(cm.name);
              });
            },
          },
        }).mount("#app");
      </script>
    </body>
  </html>
</html>

請注意，如果 products 陣列不是 carModel 陣列的子集，如果 products 中存在的所有字串也存在于 carModel 名稱欄位中，則不需要filteredCarModel()計算屬性。

uj5u.com熱心網友回復：

將您的汽車模型更改為哈希

carModel: { 'car_a': 4, 'car_b': 2 }

因為您要做的是按字串訪問陣列（它應該是數字作為陣列的索引）

uj5u.com熱心網友回復：

觀察：

products應該是一個通過迭代的陣列v-for。
作為carModel一個陣列。您不能直接訪問物件屬性。通過訪問它index。

作業演示：

new Vue({
  el: "#app",
  data: {
    products: [{name: 'car_a'}, {name: 'car_b'}],
    carModel:[{car_a: 4}, {car_b: 2}]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(product, index) in products" :key="index">
    <input type="number" :value="carModel[index][product.name]"/>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432672.html

標籤：javascript Vue.js Vuejs3

上一篇：為什么WebStorm將Vue中的布爾屬性標記為在Vue組件中無效？

下一篇：VUEJS-如何將資料變數從子組件使用到父組件

Vuejs，如何系結陣列中的輸入值？

這是關鍵：