Question

我是Vue.js的新手，所以请原谅我缺乏正确的术语...

https://jsfiddle.net/msoutherton/eywraw8t/203188/

上面的链接是一个启动（但未完成）的应用程序，希望可以使您了解我要做什么。我正在尝试构建一个标签打印机，允许用户自定义他们要打印的数据。如果您对此熟悉，则类似于Microsoft Word处理邮件合并的方式。

在我的新Vue应用程序实例中，我有一些数据...

el: '#app',
data: {
  labels: [
    {
      FirstName: 'Michael',
      LastName: 'Scott'
    },
    {
      FirstName: 'Pam',
      LastName: 'Beesly'
    },
    ...etc...
  ]
}

...我有一个循环...

<li v-for="label in labels">
  {{ label.FirstName }} {{ label.LastName }}
</li>

到目前为止，它的效果非常好。我接下来要做的是允许用户修改那些

标记之间的数据。

所以我添加了...

<textarea v-model="label_format"></textarea>

...并且我已经将label_format添加到我的应用数据中，以便有一个默认值...

data: {
  label_format: '{{ FirstName }} {{ LastName }} ',
  labels : [
    ..etc...

...但是我不确定下一步该怎么做，以便输入到我的文本区域中的数据随后用于显示数据。我假设我需要某种函数来在输入中搜索与我的数据键匹配的任何{{字符串}}，然后以某种方式映射到该数据并显示它。

Answer 1

将FirstName和LastName放入变量：

data: { attr1: 'FirstName', attr2: 'LastName', labels: [
  {
    FirstName: 'Michael',
    LastName: 'Scott'
  },
  {
    FirstName: 'Pam',
    LastName: 'Beesly'
  }]
}

然后将新变量用于HTML中的“变量”输出：

<li v-for="label in labels">
  {{ label[attr1] }} {{ label[attr2] }}
</li>

然后创建一种让用户定义attr1和attr2的方法，例如使用

<select v-model="attr1"><option v-for="prop in Object.keys(labels[0])">{{ prop }}</option></select>

提供可用属性的元素。

我认为这应该让您入门。

如何v-for循环数据，但根据模型的输入显示

1 个答案: