Q&A
回答ありがとうございます。
event.target.valueで試したところ、「Property 'value' does not exist on type 'EventTarget'」となりました。また、1~5のどのボタンを押しても、「localhost3000/set」に遷移する（失敗の）時と「localhost3000/set/?number=value（valueは押したボタンの値）」に遷移する（成功）のときがあります。
前提・実現したいこと
v-btnでボタンを作って、押されたボタンのvalueをクエリに含めてページ遷移したいのですが上手くいきません。
1つ目のボタンを押すと、「/set/?number=1」に遷移させたいです。
発生している問題・エラーメッセージ
どのボタンを押しても「/set」に遷移してしまいます。
該当のソースコード
vue
1<template> 2 <v-layout wrap> 3 <v-btn @click="select" value=1>1</v-btn> 4 <v-btn @click="select" value=2>2</v-btn> 5 <v-btn @click="select" value=3>3</v-btn> 6 <v-btn @click="select" value=4>4</v-btn> 7 <v-btn @click="select" value=5>5</v-btn> 8 </v-layout> 9</template> 10 11<script> 12export default { 13 methods: { 14 select() { 15 this.$router.push({ path: 'set', query: { number: this.value } }) 16 } 17 } 18}; 19</script>
回答2件
0
Vuetify.jsのv-btnコンポーネントで、ボタンクリック時にページ遷移を行いたい場合、
ルーティングに
- vue-routerを使っている場合は、
toプロパティ - nuxtを使っている場合は、
nuxtプロパティ
を使用します。
ここではvue-routerを前提に回答します。
<v-btn :to="{ path: 'set', query: { number: 1 } }">1</v-btn>
v-forと組み合わせた例
<v-btn v-for="i in 5" :key="i" :to="{ path: 'set', query: { number: i } }">{{ i }}</v-btn>
なおv-btnコンポーネントのvalueプロパティは、下記に引用した通り
コンポーネントがグループ内で選択されたときに使われる値です。もし指定しなかった場合、index が使用されます。
ボタングループで使用されることを想定しています。
投稿2020/08/26 14:37
総合スコア1752
0
ベストアンサー
this.$router.push({ path: 'set', query: { number: this.value } })
ここでのthisはVueコンポーネントのことを指します。
@clickに引数なしでメソッドを指定する場合は第一引数に自動的にeventが渡りますので
event.target.valueのような感じでeventから辿ってvalueを取ってください
投稿2020/08/25 09:57
総合スコア5036
Vuetifyのv-btnは実際のbutton要素は触れないみたいで、event.currentTarget.valueでないとダメみたいですよ
https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget
検証用コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => {
Vue.use(Vuetify);
Vue.use(VueRouter);
const app = {
template: `
<v-app>
<v-main>
<v-container>
<v-layout wrap>
<v-btn @click="select" value=1>1</v-btn>
<v-btn @click="select" value=2>2</v-btn>
<v-btn @click="select" value=3>3</v-btn>
<v-btn @click="select" value=4>4</v-btn>
<v-btn @click="select" value=5>5</v-btn>
</v-layout>
</v-container>
</v-main>
</v-app>
`,
methods: {
select(e) {
console.log(e.currentTarget.value);
this.$router.push({
path: 'set',
query: {
number: e.currentTarget.value
}
})
}
}
};
const router = new VueRouter({
routes: [{ path: '/set', component: app }],
});
new Vue({
vuetify: new Vuetify(),
router,
}).$mount('#target');
});
</script>
</head>
<body>
<div id="target">
<p>
<router-link to="/set">Go to Set</router-link>
</p>
<router-view></router-view>
</div>
</body>
</html>
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。