Question

我的案子一定很奇怪，但我对此有好处。这是我的情况：

我有一个Vue应用，该应用基于json呈现表单。例如，JSON：

{
  "fields": [{
      "name": "firstName",
      "title": "Name"
  }, {
      "name": "lastName",
      "title": "Last Name"
  }, {
      "title": "Hello {{ firstName }}!"
  }]
}

从该json开始，最终渲染必须为：

<input type="text" name="firstName" v-model="firstName" />
<input type="text" name="lastName" v-model="lastName" />
<p>Hello {{ firstName }}</p>

除了<p>被呈现为原始{{ firstName }}且没有数据绑定/反应性的{...firstName field...} <dynamic template will be added here and update whenever firstName changes>之外，我都能呈现所有这些内容。

我的问题是：如何将动态模板（可以来自Rest API）插入到组件中，并使它们具有胡须表达式的全部功能。

该组件将类似于

{{1}}

如果我对此问题不太清楚，请告诉我谢谢！！！

Answer 1

这是您要尝试做的事情吗？我创建了一个动态组件，该组件的模板是根据可编辑的JSON字符串生成的。

$query = "SELECT id, date,(select username from users where id = u.user_id) as user, (select description from requests where id = u.request_id) as request, notes, SUM(hours) as clienthours, hours from updates u where u.request_id=$rid and date(date) = (select max(date(date)) from updates where request_id = $rid) order by (select description from requests where id = u.request_id) asc

new Vue({
  el: '#app',
  data: {
    componentData: {
      firstName: 'Jason',
      lastName: 'Bourne',
    },
    jsonString: `
    {
      "fields": [{
        "name": "firstName",
        "title": "Name"
      }, {
        "name": "lastName",
        "title": "Last Name"
      }, {
        "title": "Hello {{ firstName }}!"
      }]
    }`
  },
  computed: {
    template() {
      const json = JSON.parse(this.jsonString);

      return json.fields.map((s) => {
        if ('name' in s) {
          return `<input type="text" name="${s.name}" v-model="${s.name}">`;
        }
        return s.title;
      }).join('\n');
    },
    componentSpec() {
      return {
        template: `<div>${this.template}</div>`,
        data: () => this.componentData
      };
    }
  }
});

在Vue.js中动态添加数据绑定文本

1 个答案: