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

Posted 2023-02-23

【中文标题】在 Vue.js 中添加动态数据绑定文本

【英文标题】：Add dynamically data-bound text in Vue.js

【发布时间】：2019-04-30 12:37:22

【问题描述】：

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

我有一个基于 json 呈现表单的 Vue 应用程序。 例如，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 ，而不是数据绑定/反应。

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

组件会有类似的东西

...firstName field...
<dynamic template will be added here and update whenever firstName changes>

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

【问题讨论】：

你可以让你的 json 成为一个计算属性并拥有"title": "Hello " + this.firstName

是的，我能够做到，但这对我来说似乎并不优雅。我最终不得不通过 REST API 在 JSON 中使用发送 JS 字符串连接表达式，所以它最终得到了类似的东西 "title": "'Hello ' + this.firstName 并在计算属性中调用 eval()。但同样，不优雅......我会等待更好的方法，因为我找不到一个

嗯，是的，调用eval 是一种代码味道。不过，如果没有看到您的完整代码，很难给出建议。

<p>Hello <span v-text="firstName"></span></p>?

不能使用它，因为整个新元素 <p>Hello <span v-text="firstName"></span></p> 是要在元素中设置的字符串。在从 API 检索到响应之前，此元素不存在，并且一直在变化。一个字符串可能正在读取 firstName，但另一个可能正在读取其他任何内容

【参考方案1】：

这是你想要做的事情吗？我创建了一个动态组件，其模板是从可编辑的 JSON 字符串生成的。

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
      ;
    
  
);

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <textarea rows="16" cols="40" v-model.lazy="jsonString">
  </textarea>
  <component :is="componentSpec"></component>
</div>