在 Vue 中解析动态加载的指令

Question

我有一个 Vue 组件发出 post 请求，然后输出返回的 html。

有时，post 返回的 html 包含 Vue 指令。

有没有办法让 Vue 在输出之前解析返回的 html？

（从长远来看，我会将其重写为纯 Vue 解决方案，post 请求返回数据而不是 html。如果可能的话，我正在寻找短期解决方案).

编辑：这是我根据 thanksd 的建议进行的尝试，但我不确定如何将新的 Vue 实例绑定到 html 元素。

<template>
<div>
    <input type="text" class="form-control" v-model="value" @change="getResults" ></input>
    <div>
        <template v-bind="results"></template>
    </div>
</div>
</template>

<script>
import{eventHub} from '../utils/event.js'
export default {

    data : function(){
        return {
            value : '',
            results : {}
        }
    },

    methods:{
        getResults(){
            if(this.value.length < 3){return;}
            this.$http.post('/ajax/search',{search:this.value}).then((response)=>{
                this.results = Vue({template:response.body});       
            });
        },
    },
}

Answer 1

在 post 请求 returns 之后，您可以创建一个新的 Vue 实例，将 html 作为模板传递并将其绑定到当前 Vue 实例模板中的元素：

<template>
  <div>
    <input type="text" class="form-control" v-model="value" @change="getResults" ></input>
    <div>
      <div id="results"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { value: '' }
  },
  methods: {
    getResults() {
      if (this.value.length < 3) {
        return;
      }

      this.$http.post('/ajax/search', { search: this.value }).then((response) => {
        new Vue({ el: '#results', template: response.body });       
      });
    }
  }
}
</script>

或者正如@Bert 指出的那样，您可以在模板中添加一个 <component> tag 并通过 is 属性传递其定义：

<template>
  <div>
    <input type="text" class="form-control" v-model="value" @change="getResults" ></input>
    <component :is="results"/>
  </div>
</template>

<script>
export default {
  data() {
    return { 
      value: '',
      results: null
    }
  },
  methods: {
    getResults() {
      if (this.value.length < 3) {
        return;
      }

      this.$http.post('/ajax/search', { search: this.value }).then((response) => {
        this.results = { template: response.body };       
      });
    }
  }
}
</script>

在 Vue 中解析动态加载的指令

Parsing dynamically loaded directives in Vue

laravel

vue.js

vuejs2