Ramazan Apaydın Ramazan Apaydın - 1 year ago 167
JSON Question

VueJS Resource reload content

Resource file helper/json.json

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


Vue main.js file

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');
})
}
}
})


Output: Not Renderer

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


Event does not work when the button is clicked. Data can not be loaded.

Answer Source

Vue.resourse have no relation to this problem becouse html string from json isn't compiled.

Here a little test based on your example:

<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