Vuetifyがvueファイルで使えません
app.vueでは<v-btn>でボタンを表示できるのですが、routerで設定したTweetIndexPage.vueでは使えなくなります
import関係を半日間いじってみましたが解決できませんでした
よろしくお願いします
###エラー
[Vuetify] Multiple instances of Vue detected See https://github.com/vuetifyjs/vuetify/issues/4068 If you're seeing "$attrs is readonly", it's caused by this
###main.js
import Vue from 'vue' import App from '../app.vue'; import Vuetify from "vuetify"; import "vuetify/dist/vuetify.min.css"; Vue.use(Vuetify); const vuetify = new Vuetify(); document.addEventListener('DOMContentLoaded', () => { const el = document.body.appendChild(document.createElement('tweet')) const app = new Vue({ el, vuetify, render: h => h(App) }) })
###app.vue
ここではボタンとして表示される
<template> <div> <router-view></router-view> <v-btn>Vuetifyのボタン</v-btn> </div> </template> <script> import Vue from 'vue' import VueRouter from 'vue-router' import TweetIndexPage from 'TweetIndexPage.vue' const router = new VueRouter({ mode: 'history', routes: [ {path: '/tweets', component: TweetIndexPage, } ], }) Vue.use(VueRouter) export default { router } </script> <style scoped> </style>
###TweetIndexPage.vue
こちらではボタンとして表示されません
<template> <div id="app"> <v-btn>Vuetifyのボタン</v-btn> //ボタンとして表示されない </div> </template> <script> import axios from 'axios'; export default { data: function() { return { tweets: [], // currentPage: 1, // tweetsPerPage: 10, // totalPages: null } }, mounted() { axios .get('/api/v1/tweets.json') .then(response => (this.tweets = response.data)) // this.fetchBooks() }, methods: { reset: function () { this.$router.go({path: this.$router.currentRoute.path, force: true}) }, // fetchTweets() { // const url = `/api/tweets?page=${this.currentPage}?per=${this.tweetsPerPage}`; // axios // .get(url) // .then(response =>{this.totalPages = response.data.total_pages}) // } } } </script> <style scoped> </style>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。