【Vue.js】Twitterシェアするときのテキスト部分に配列の合計金額を入れたい
Q&A
Closed
作ろうとしているもの
メニューガチャのアプリを作っています。
配列から4つランダムで抽出して、その合計金額を出すとこまではできたのですが、
それをTwitterでシェアするところでつまづいています。
現状のコードとエラー
抽出したメニュー名をTwitterのテキスト部分に出すのはできたのですが、
合計金額をどうやって出せばいいのかうまくいかないです・・・
お知恵をお貸しいただけると幸いです。
宜しくお願いします。
<div v-show="show">
<li class="list-group-item list-group-item-light" v-for="i in 4">
{{menus[i].name}} ・・・{{menus[i].price}}円（税別）
</li>
<li class="list-group-item list-group-item-success">
合計金額は <b>{{totalprice}}</b>円（税別）です！
</li>
<br>
<div class="twitter_share" align="center" >
<button v-on:click="twitterShare" type="button" class="btn btn-primary">ツイートする</button>
</div>
</div>
<br>
<p style="text-align: center; font-size: small">made by <a href="https://twitter.com/unias_tawa" target="_blank">たわちゃん</a></p>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
show: false,
menus: [
{ name: "チキンカレー", price: 650 },
{ name: "マトンカレー", price: 850 },
{ name: "ダル", price: 600 },
//一部省略
{ name: "キール", price: 380 },
{ name: "プルチェ", price: 450 },
{ name: "ハルワ", price: 390 }
]
},
methods: {
gacha: function() {
this.menus.sort(() => Math.random() - 0.5);
this.show = true;
},
twitterShare() {
var s, url;
s = "本日のネパール料理は" + "%0a%0a"+ this.menus[1].name + "%0a" + this.menus[2].name + "%0a" + this.menus[3].name + "%0a"
+ this.menus[4].name + "%0a%0aで合計" + this.total + "円（税抜）です！";
url = ''; //あとでここにアプリURLを入れる
if (s.length > 140) {
alert("テキストが140字を超えています");
} else {
url = "http://twitter.com/share?url=" + escape(url) + "&text=" + s + "%0a%20%23プルジャダイニングガチャ" + "%20%23ネパール料理ガチャ";
window.open(url, "_blank", "width=600,height=300");
}
}
},
computed: {
totalprice: function() {
let total = 0;
for(let i=1; i<=4; i++) {
total += this.menus[i].price;
}
return total;
},
}
})
1
