VueJS资源重新加载内容

VueJS Resource reload content

本文关键字：加载 资源 新加载 VueJS      更新时间：2023-09-26

资源文件helper/json.json

{
  "content": {
    "content_body": "<a href='#' v-on:click.prevent='getLink'>{{ button }}</a>",
    "content_nav": "",
  }
}

Vue main.js文件

new Vue({
    el: 'body',
    data: {
        text: 'Lorem sss',
    },
    methods: {
        getLink: function(){
            this.$http.get('http://localhost/vuejs/helper/json.json').then((resp) => {
                this.$set('text', resp.data.content.content_body);
            }, (resp) => {
                console.log('error');
            })
        }
    }
})

输出:Not Renderer

<a href="#" v-on:click.prevent="getLink">{{ button }}</a>

事件在按钮被点击时不起作用。无法加载数据

资源与这个问题无关因为json中的HTML字符串没有被编译。

这里有一个基于你的例子的小测试:

<body>
    <a href='#' v-on:click.prevent='getLink' v-text="button"></a>
    <div v-el:sample></div>
</body>

var test = new Vue({
  el: 'body',
  data: {
    button: 'Lorem sss',
  },
  methods: {
    getLink: function(){
      var r = Math.floor(Math.random() * (4 - 1)) + 1;
      this.$set('button', ['','btn1','btn2','btn3'][r] );
    },
    getCompiled: function() {
      $(this.$els.sample).empty()
      var element = $(this.$els.sample).append("<a href='#' v-on:click.prevent='getLink'>{{ button }}</a>");
      this.$compile(element.get(0));
      $(this.$els.sample).prepend('<p>Compiled button:</p>')
    }
  },
  ready: function() {
    this.getCompiled();
  }
})

jsfidle

相关文章：