在组件中动态绑定数据到 vue 模型

Question

我正在尝试制作一个简单的表单来接受用户输入的不同类型的货币。

这是一个（坏掉的）小提琴，希望能解决我想做的事情： https://jsfiddle.net/4erk8yLj/7/

我希望我的组件将数据绑定到我的根 vue 实例，但我不确定我的 v-model 字符串是否允许。看看吧：

Vue.component('conversion-row', {
  props: ['currency', 'values'],
  template: '<div>{{currency}}:</div><div><input v-model="values[currency]></div><',
});

var vm = new Vue({
  el: "#app",
  data: {
    currencies: ['USD', 'BTC'],
    values: {
      'BTC': '',
      'USD': ''
    }
  }


});

模板：

<div id="app">
  <li>
    <conversion-row is li v-for="currency in currencies" v-bind:currency="currency">
    </conversion-row>
  </li>
</div>

有什么好的方法可以解决这个问题？

Answer 1

您可能需要纠正的几件事：

首先，data 属性必须是函数而不是对象。这允许每个实例在每次创建时重新计算数据，请参阅：

var vm = new Vue({
  el: "#app",
  data() {
    return {
      currencies: ['USD', 'BTC'],
      values: {
        'BTC': 'BTC Value',
        'USD': 'USD Value',
      },
    };
  }
});

第二，<conversion-row> 没有values 属性绑定。您可以执行以下操作：

<div id="app">
  <li v-for="currency in currencies">
    <conversion-row :currency="currency" :values="values"></conversion-row>
  </li>
</div>

最后，组件应该始终以一个根元素（包装器）为目标，然后您可以在其中嵌套任意数量的子元素。更重要的是，您可以绑定value，而不是使用v-model，这是将值传递给输入的正确方法（单向数据绑定），请检查以下内容：

Vue.component('conversion-row', {
  props: ['currency', 'values'],
  template: '<div>{{currency}}:<input type="text" :value="values[currency]"></div>'
});

如果您需要将values 和currency 传递给conversion-row，您可以在这里进行更多改进，例如重新考虑，但我很确定您稍后会弄清楚。

以上所有内容将使您的代码正常运行和执行，这是工作示例（您的分支）：

• https://jsfiddle.net/maciejsmolinski/mp8m0ben/1/

这有帮助吗？

不确定您在使用 v-model 方面的目标是什么，但这里有一个使用 v-model 的示例（基于您的示例）：

Vue.component('conversion-row', {
  props: ['currency', 'values'],
  template: '<div>{{currency}}:<input type="text" v-model="values[currency]"></div>'
});

以及对应的模板：

<div id="app">  
  <p><strong>USD Value:</strong> {{ values.USD }}</p>
  <p><strong>BTC Value:</strong> {{ values.BTC }}</p>

  <br>

  <li v-for="currency in currencies">
    <conversion-row :currency="currency" :values="values"></conversion-row>
  </li>
</div>

您可以在以下网址找到它：

• https://jsfiddle.net/maciejsmolinski/0xng8v86/2/