2017-08-05 5 views
0

この名前を変更するには、名前とボタンを含む段落でなければなりません "adel"から "mohamed"に変更されましたが、 、ブラウザで任意のものを示すと私はコンソールERRを持っていないことである。vue.js2コンソールエラーは "app.js:2 Uncaught SyntaxError:予期しない識別子"

app.js:2 Uncaught SyntaxError: Unexpected identifier,

You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html

htmlコード

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>vue.js course</title> 
    <link rel="stylesheet" href="./styles.css"> 
    <script src="https://unpkg.com/vue"></script> 
</head> 

<body> 
    <div id="vue-app-one"> 
    <greeting></greeting> 

    </div> 

    <div id="vue-app-two"> 
    <greeting></greeting> 


    </div> 
    <script src="./app.js"></script> 
</body> 

</html> 

app.jsコード

Vue.component('greeting', { 
    template: "<h1>hello {{ name }}. <button v-on:click="chang">change name</button></h1>", 
    data(){ 
    return { 
     name:"adel" 
    } 
    }, 
    methods: { 
    chang: function(){ 
     this.name = 'mohamed'; 
    } 
    } 
}); 

var one = new Vue({ 
    el: '#vue-app-one' 

}); 

var two = new Vue({ 
    el: '#vue-app-two' 

}); 

答えて

0

これは簡単です。テンプレートで使用されている二重引用符を一重引用符に変更するだけです。

template: "<h1>hello {{ name }}. <button v-on:click='chang'>change name</button></h1>", 

jsfiddle that works

+1

haha​​hahahahahahahaha、shitttttttttttttttへ

you can't include the same quote mark inside the string if it's being used to contain them

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings

template: "<h1>hello {{ name }}. <button v-on:click="chang">change name</button></h1>", 

関連する問題