javascript - 如何使用 AJAX 调用收到的 VueJS 中的变量呈现 HTML 内容？

Question

我试图意识到某些内容是通过 POST 请求动态加载的（也用于解释我创建了静态方法）和 HTML 中的 vue 变量。

HTML 是通过 PHP 中的服务器端生成的。

问题：当某些 v-model 输入在组件之外更改时，动态内容会使用默认值重新呈现。

重现步骤：

1. 按 STATIC 或 POST 按钮

2. 将加载组件。将输入值从 5 更改为任何其他值

3. 将输入的数量从 7 更新为任何其他，动态内容将重置为默认值（输入值重置为 5）。

代码示例：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>1. Press STATIC or POST button</p>
  <button @click="updateContentStatic">STATIC</button>
  <button @click="updateContentPost">POST</button>
  <p>2. Will be loaded component. Change input value from 5 to any other</p>
  <component :is="dynamicContent && {template:dynamicContent}"></component>
  <p>3. Update amount input, and dynamic content will be reset to default.</p>
  <input type="text" v-model="amount">
</div>

<script>
let app = new Vue({
  el: '#app',
  data: {
    amount: '7',
    dynamicContent: '',
  },
  methods: {
    updateContentPost() {
      $.post({ url: '/test123',
        success: function(data) { app.dynamicContent = data; }
      });
    },
    updateContentStatic() {
        app.dynamicContent = '<div><input value="5"> Amount {{ $root.amount }}</div>';
    },
    updateAmount() {
        this.amount = 10001;
    }
  }
});
</script>

JSFiddle 链接：https ://jsfiddle.net/fe6znjrs/1/

标签： javascriptvue.js