VueJSリソースは、コンテンツ

リソースファイルヘルパー/ json.jsonVueJSリソースは、コンテンツ

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

出力をリロードボタンをクリックします。データをロードできません。

出典

2016-09-05 Ramazan Apaydın

ChechのdevのツールであなたのXHRタブ。また、 '（resp）=> {'内部で 'console.log（this）'を実行しようとすると、Vueインスタンスに正しくバインドされていますか？ – GONG

https://s9.postimg.io/42jwh82kv/Ekran_Resmi_2016_09_05_13_45_35.png –

Vue.resourseがコンパイルされていないJSONからHTML文字列becouseこの問題とは関係がありません。ここで

あなたの例に基づいて少しテスト：

<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

出典

2016-09-05 12:36:45

VueJSリソースは、コンテンツ

答えて

関連する問題