Q&A
s_id にセットする id の値は数値ですか？文字列ですか？
また、「なぜかコンポーネントが機能しなくなってしまいます。」というときの具体的な問題点（期待した動き、問題のある動き）を記載し、エラーメッセージなどがあれば記載しましょう。
質問は編集できますので、質問に追記してください。
上のhtmlのコードをテンプレートとして下のhtmlを表示させようとしたときにコンポーネントオブジェクトのdataを渡す関数で
s_id:{{id}},を書き込むとなぜかコンポーネントが機能しなくなってしまいます。
わかる方がいましたら教えていただけないでしょうか？
宜しくお願い致します。
- 期待していた処理
期待していた処理としてはコンポーネントにて送信用のフォームを作成し、フォーム入力した値を
データベースに書き込むといった処理です。アクセスを管理しているのはpython のflaskです。
- 発生したエラー
下記のメッセージがありました。
```エラー
・The key "shrink-tofit" is not recognized and ignored.localhost/:83
・Uncaught SyntaxError: Unexpected token ','
vue.js:9099 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.js:9108 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
・Failed to load resource: the server responded with a status of 404 ()
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bootstrap.min.js:1
・Failed to load resource: the server responded with a status of 404 ()
popper.min.js:1
・Failed to load resource: the server responded with a status of 404 ()
%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bootstrap.min.js:1
```html <!DOCTYPE html> <html lang="ja"> <head> <title>{% block title %}{% endblock %}</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-tofit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" > <!--<link rel="stylesheet" href="../static/style.css">--> <!--下記スクリプトはVue.jsのうれーむワークを読み込むためのcdn--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--下記でjqueryの完全版を読み込む.前章までは一部の機能が使用できないバージョンを使用していた--> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body class=""> <div class="container"> <h1 class="display-3"> {% block headline %}{% endblock %} </h1> <div> {% block content %}{% endblock %} </div> <div class="text-right"> {% block footer %}{% endblock %} </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/ umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/ bootstrap.min.js"></script> </body> </html>
html
1{% extends 'layout.html' %} 2 3{% block titele %} 4{{title}} 5{% endblock %} 6 7{% block headline %} 8{{title}} 9{% endblock %} 10{% block content %} 11 <div class="mb-3" id="msg">{{message}}</div> 12 <div id="app" class="m-3"> 13 <mycomp/> 14 </div> 15 16 {% raw %} 17 <script type="text/x-template" id="mycomp-template"> 18 <!--入力フォーム--> 19 <div> 20 <div class="alert alert-info"> 21 <h5>{{alert}}</h5> 22 </div> 23 <div class="form-group"> 24 <label for="id">Name</label> 25 <input type="text" class="form-control" id="name" v-model="f_name"> 26 </div> 27 <div class="form-group"> 28 <label for="id">Mail</label> 29 <input type="text" class="form-control" id="mail" v-model="f_mail"> 30 </div> 31 <div class="form-group"> 32 <label for="id">Age</label> 33 <input type="text" class="form-control" id="age" v-model="f_age"> 34 </div> 35 <div class="form-group"> 36 <button class="btn btn-primary" v-on:click="action">Add</button> 37 </div> 38 <!--表示部分--> 39 <hr> 40 <table class="table"> 41 <thead> 42 <tr> 43 <th>ID</th> 44 <th>Name</th> 45 <th>Mail</th> 46 <th>Age</th> 47 </tr> 48 </thead> 49 <tbody> 50 <tr v-for="item in data"> 51 <th>{{item.id}}</th> 52 <th>{{item.name}}</th> 53 <th>{{item.mail}}</th> 54 <th>{{item.age}}</th> 55 </tr> 56 </tbody> 57 </table> 58 </div> 59 </script> 60 {% endraw %} 61 62 <script> 63 Vue.component('mycomp',{ 64 template:'#mycomp-template', 65 /*コンポーネント内のdataは関数でないといけないのでこの形*/ 66 data:function(){ 67 return{ 68 s_id:{{id}}, 69 f_name:'', 70 f_mail:'', 71 f_age:0, 72 alert:'This is SQLite3 Database sample', 73 data:[(-1,'wait...','','')], 74 } 75 }, 76 methods:{ 77 getdata:function(){ 78 let self = this; /*$.get("url/~/みたいな",function(){このルートになった時の関数の処理})*/ 79 /*下記のgetメソッドは第一引数でアクセス先を指定し第二引数の関数はアクセス先からの戻り値をリストとして引き受ける。*/ 80 /*この場合は辞書型にしたレコードを下記のdata引数が引き受ける*/ 81 $.get("/ajax",function(data){ 82 self.data = eval(data).reverse(); 83 }) 84 }, 85 getById:function(){ 86 let self =this; 87 $.get("/ajax/" + this.s_id,function(data){ 88 target = eval(data); 89 self.f_name = target.name; 90 self.f_mail = target.mail; 91 self.f_age = target.age; 92 self.alert = '※ID=' + self.s_id + 'のレコード：'; 93 }); 94 }, 95 action:function(){ 96 let formData = new FormData(); 97 formData.append("name",this.f_name); 98 formData.append("mail",this.f_mail); 99 formData.append("age",this.f_age); 100 let self = this 101 $.ajax({ 102 type:'POST', 103 url:'/form/' + self.s_id, 104 data:formData, /*ここで追加しようとしているデータを一度formDataに格納している。*/ 105 processData:false, 106 contentType:false, 107 /*通信が成功した場合はsuccess関数でf_~内の値を空にする。だからフロント内だけで完結*/ 108 success:function(data){ 109 self.f_name = ''; 110 self.f_mail = ''; 111 self.age = 0; 112 self.getdata(); 113 }, 114 error:function(request,status,err){ 115 console.log(err); 116 } 117 }); 118 } 119 }, 120 created:function(){ 121 this.getdata(); 122 this.getById(); /*s_idの値を使って/formにアクセスするもの。*/ 123 } 124 }); 125 126 new Vue({ 127 el:'#app' 128 }) 129 </script> 130 131 132{% endblock %} 133 134{% block footer %} 135copyright hiroki-kondo2021 136{% endblock %}
数値です。URL/idのidの値によりデータベースのレコードを取得するのですが
s_id:{{id}}を入れるだけでコンポーネントが完全に機能しなくなります。
回答1件
0
ベストアンサー
本質的なエラーはこの部分だけだと思います。
Uncaught SyntaxError: Unexpected token ','
予期せぬ場所に , が現れた、ということなので、おそらく id の値が存在しない未設定の場合に s_id: , となってしまいエラーが発生しているものと予想されます。
Python側のコードをチェックし、 id の値がテンプレート用にどのように設定されているか再度確認してみてください。
投稿2021/08/16 12:48
総合スコア6759
回答いただきましてありがとうございます。
自分あのと確認したのですがトップページへのアクセスurlの’/’の後にid（数字）を入れるとちゃんとdatabaseに表示されるようになりました。
なので、そもそも'/id'でないとmather様がおしゃったとおり、値がなくエラーが起こっているようです。
そのため前提条件を勘違いしていたようです。
お時間無駄にしてしまい申し訳ありません！
あなたの回答
tips
プレビュー
