考虑这个说明性示例：
const App = {
setup() {
const name = Vue.ref("");
let firstTime = true;
const message = Vue.computed(() => {
if (firstTime) {
firstTime = false;
return "Welcome stranger";
}
return `Hello ${name.value}`;
});
return {
name,
message
}
}
};
Vue.createApp(App).mount("#root");<script src="https://unpkg.com/vue@next"></script>
<div id="root">
name: <input v-model="name"/> <br/>
message: {{ message }}
</div>如您所见，message存储一个计算值，该值应该跟踪更新，name但它不是。
为什么会这样以及如何解决？
我疯狂地试图将 Vue 3 CLI 输出调和成适用于各种教程和插件的东西，这些教程和插件都使用 Vue 对象，如Vue.createApp(.... 在我的项目中，我可以使用
import {createApp} from 'vue';
createApp(...
但import Vue from 'vue';导致 Vue 仍未定义。我通过 NPM 安装了 Vue 3。显然，我不了解 NPM 导入的一些关键问题，{createApp}如果导入整个模块不起作用，导入如何工作？
来自 package.json：
"dependencies": {
"@babel/polyfill": "^7.12.1",
"apexcharts": "^3.22.1",
"core-js": "^3.6.5",
"d3": "^6.2.0",
"vue": "^3.0.0",
"vue-router": "^4.0.0-rc.1",
"vue3-apexcharts": "^1.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"babel-plugin-transform-regenerator": "^6.26.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
这是我的临时 main.js。这将打印“未定义”，然后是正确的 createApp 函数定义：
import Vue from 'vue';
import {createApp} from …我只是使用 vue3 并想应用动态样式。我的 vue3 模板如下：
<ul>
<li v-for="(question, q_index) in questions" :key="q_index" v-show="question.visible" :style="{padding-left: `question.level`rem}">
<Question :title="question.title" :options="question.options" :name="question.id" :visible="question.visible" @opUpdate="opHandle"/>
</li>
</ul>
我的模板上有“-”错误
Uncaught SyntaxError: Unexpected token '-'
如何在vue3模板中设置动态填充左CSS样式？
我正在组件的 Setup 方法中进行 Axios 调用。然后我想设置一个名为 books 的变量。在 vue 2 中，我将在创建的钩子中进行调用，然后用于this设置变量。this在 vue 3 中，setup 方法中没有可用的内容，那么如何在 axios 调用之外访问数据呢？我想获取一系列书籍，然后将其设置为 books 变量。如何做到这一点？在 Vue 3 中是否有更好的方法来做到这一点？我的设置方法如下：
setup() {
let books = reactive<Array<Book>>([])
HTTP.get('/books')
.then(response => {
//Normally here I would do this.books
books = response.data
})
.catch(function (error) {
console.log(error);
})
return { books }
}
我在商店里有一系列物品Vuex。像这样：
[
{
id: 1,
value: 'some value'
},
{
id: 2,
value: 'other value'
},
...
]
有没有办法创建一个 getter 来获取数组的某个项目id？
就像是
getArrItem(state, id) {
return state.find(item => item.id === id);
}
我试图以我正在编写的方法访问我的数据，但它似乎不起作用。我收到 TS2339 Typescript 错误，指出该类型中不存在该属性。
TS2339: Property 'players' does not exist on type '{ onAddPlayers(): void; getPlayerPlaceholder(index: number): string; }'.
47 | methods: {
48 | onAddPlayers() {
> 49 | this.games = prepareGames(this.players as PadelPlayer[]);
| ^^^^^^^
50 | },
51 | getPlayerPlaceholder(index: number) {
52 | const playerNumber = Number(index) + 1;
这是组件的代码：
<script lang="ts">
import { PadelGame } from "@/models/padelGame.interface";
import { getPadelPlayers, prepareGames } from "../services/americanoService";
import { PadelPlayer } from "@/models/padelPlayer.interface";
const padelGames: PadelGame[] = []; …我对 VueJS 比较陌生，现在我正在尝试替换
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
经过
<script src="https://unpkg.com/vue@next"></script>
问题是，在此更改之后，以前的工作代码被破坏了：
<script>
window.addEventListener('load', () => {
const defaultOptions = {
position: 'bottom-center'
}
Vue.use(Toasted, defaultOptions) # The error arises here
});
</script>
我遇到了
未捕获的类型错误：Vue.use 不是函数
我在这里做错了什么？
更新：我现在没有使用 webpack。没有 webpack 可以做到这一点吗？
我有带有 的侧边栏组件Links，并且我需要Link在打开特定 URL 时更改颜色。
React 中最好的解决方案是什么？
我收到此错误：
vue-router.esm-bundler.js?6c02:3265 Uncaught TypeError: Cannot read property 'location' of undefined
at Object.install (vue-router.esm-bundler.js?6c02:3265)
at Object.use (runtime-core.esm-bundler.js?5c40:2948)
at eval (main.js?56d7:7)
at Module../src/main.js (app.js:1088)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Object.1 (app.js:1113)
at __webpack_require__ (app.js:854)
at checkDeferredModules (app.js:46)
at app.js:994
文件 router.js：
import {createRouter, createWebHistory} from 'vue-router'
const routerHistory = createWebHistory()
const router = createRouter({
mode: routerHistory,
routes: [
{
path: '/',
component: () => import('./views/Home.vue')
},
{
path: '/todos',
component: () => import('./views/Todos.vue')
}
]
})
export default router;
文件 …
大家好，我在我的 Laravel 项目中启动 Vue 没有什么问题。
这是我的 package.json
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.32",
"@fortawesome/free-brands-svg-icons": "^5.15.1",
"@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.1",
"@vue/compiler-sfc": "^3.0.5",
"axios": "^0.21",
"bootstrap": "^4.0.0",
"jquery": "^3.2",
"laravel-mix": "^6.0.0-beta.17",
"laravel-mix-vue3": "^0.7.0",
"lodash": "^4.17.19",
"popper.js": "^1.12",
"postcss": "^8.1.14",
"resolve-url-loader": "^2.3.1",
"sass": "^1.20.1",
"sass-loader": "^8.0.0",
"vue": "^3.0.5",
"vue-loader": "^16.1.2",
"vue-template-compiler": "^2.6.10"
}
网络包组合：
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css');
这是我的 app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting …