Vue.js에서 동적으로 데이터 바인딩된 텍스트

Vue.js에서 동적으로 데이터 바인딩된 텍스트

내 케이스는 이상하겠지만, 난 좋은 점이 있어.여기 내 상황이 있다.

나는 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에서 나올 수 있음)를 삽입하고 콧수염 표현의 모든 힘을 갖도록 하려면 어떻게 해야 하는가?

구성 요소에는 다음과 같은 것이 있을 것이다.

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

내가 이 문제에 대해 너무 명확하지 않으면 알려줘. 고마워!!!

이게 네가 하려는 짓이야?편집 가능한 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>

참조URL: https://stackoverflow.com/questions/53522242/add-dynamically-data-bound-text-in-vue-js