Ramazan Apaydın Ramazan Apaydın - 3 months ago 38
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

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