对 Vue 变量的字符串操作

Question

如何使模板动态化？我希望field.title.arrayName 成为text1.arrayName、text2.arrayName 等等...

Vue.component('box', {
  props: ['field'],
  template: `
      <div>
        <p>Total:{{ field.title + '.arrayName.length' }}</p>
      </div>

      <div>
        <card-stack v-for="x in field.title + '.arrayName'" v-bind:course="x"></card-stack>
      </div>
    `
})

new Vue({
  el: 'main',
  data: {
    fields: [
      { title: 'text1' },
      { title: 'text2' },
    ],
  }
})

这是我的 HTML：

<main>
    <box v-for="x in fields" v-bind:field="x"></box>
</main>

另外，text1 和 text2 是组件名称：

var text1 = new Vue({
  el: '#text1',
  data: {
    arrayName: [
      { title: 'example' },
    ],
  }
})

注意

请编辑我的问题标题，因为我真的不知道如何描述它

Answer 1

使用eval() 有效：

<p>Total:{{ eval(field.title + '.arrayName.length') }}</p>

<card-stack v-for="x in eval(field.title + '.arrayName')" :course="x"></card-stack>