Question

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

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

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

（从长远来看，我会将其重写为纯粹的Vue解决方案，其中post请求返回数据而非html。如果可能的话，我会在短期解决方案之后）。

编辑：根据感谢的建议，这是我的尝试，但我不确定如何将新的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请求返回后，您可以创建一个新的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中解析动态加载的指令

1 个答案: