正如标题所说的那样，我仍然会指导您重现该问题。详情如下。
npm install - 对于节点composer install - 用于 php打开resources/views/welcome.blade.php并编辑为下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mix</title>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
</head>
<body>
<div id="app">
<h1>Hello, world!</h1>
<example-component />
<camel-case-component />
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
打开resources/js/app.js并编辑为下面的代码
require('./bootstrap');
window.Vue = require('vue');
Vue.component('camel-case-component', require('./components/CamelCaseComponent.vue').default);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: …我正在尝试将 $emit 事件发送给 root，但它不起作用。当我按下回车键时，它应该发送到 root 并且组件应该获取该事件并执行将其推送到数组的函数。
JS：
Vue.component('input-comp',{
template : `
<div>
<input type="text" v-model ="textData" v-on:keyup.enter ="pushMessages"/>
<button v-on:click="pushMessages">Send text</button>
</div>`,
data : function(){
return {
textData : 'test Message'
}
},
methods : {
pushMessages : function(){
this.$root.$emit('message', { message: this.textData })
}
}
})
var vm = new Vue({
el : '#parent',
data : {
msgs : []
},
methods : {
pushMessages : function(payload){
this.msgs.push(payload.message)
}
},
updated(){
this.$root.$on('message', this.pushMessages)
}
})
HTML：
<div id="parent">
<p …我找不到我的问题的答案，我认为只有 Vue.js 才有可能，但我不是 100% 确定。所以问题是。我希望用户从他的计算机中选择文件，它总是 json 文件。可以获取该文件并仅使用 Vue.js 使用它，或者我需要一些后端。
我看到很多关于 Vue + Typescript 组件类的相互矛盾的文档。
在哪里定义属性？在此处@Component概述的注释中？作为此处概述的带注释的实例属性？@Prop
在哪里初始化定义的属性？在构造函数中？在字段级属性定义中？
是否有这些东西的明确的、最新的参考资料或最新的示例应用程序？
这是我现在所拥有的：
<template>
<div class='contacts'>
<b-form @submit="search">
<b-form-group>
<b-form-input v-model="q"></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Search</b-button>
</b-form>
<b-table :items='contacts'></b-table>
</div>
</template>
<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator'
@Component
export default class Contacts extends Vue {
constructor(options: any) {
super(options);
this.q = 'dummy data';
this.contacts = [{
'id': 1,
'first_name': 'Lukas',
'last_name': 'Stigers',
'email': null,
'gender': 'Male',
'phone': '776-878-7222'
}, {
'id': 2,
'first_name': 'Dari',
'last_name': 'Matkin',
'email': …当打开一个新的 Vue.js 页面时，会出现一个白色页面，直到整个应用程序加载完毕。我试过很多次用传统的方式把loading语句放在最前面，但是问题是连loading语句都需要一段时间才能加载出现，替换白页。
<div id="app">
<template>
<div id="app">
<v-app>
<navbar></navbar>
<v-content class="mx-sm-12 mt-8 mx-1">
<router-view />
</v-content>
</v-app>
</div>
</template>
<script>
import navbar from "./components/navbar";
export default {
components: {
navbar
}
}
</script>
我使用 Django 作为后端，我试图将一些数据传递到我制作的 Vue 表组件中。我使用本教程进行设置使用 webpack 时组件显示正常。我正在尝试将数据设置为 javascript 常量，然后将其传递到组件中。数据似乎没有通过。这是我的脚本的布局方式。
索引.html
{% block content %}
<script>
const gridData = {{json_data|safe}};
console.log(gridData)
</script>
<div id="app">
<table_component
v-bind:tableData=this.gridData
>
</table_component>
</div>
{% end block %}
myComponent.vue 脚本部分
export default {
name: 'table_component',
props: {
tableData: Array
},
data() {
return {
}
},
components: {
Grid,
ButtonModal
},
created(){
console.log(this.tableData)
},
}
当我查看控制台时，它没有显示任何数据。它只是说未定义。
查看.py
class CurrentClassroomView(LoginRequiredMixin, CreateView):
template_name = 'home/index.html'
def get(self, request, *args, **kwargs):
db_data = list(myData.objects.all().values())
my_json_data = json.dumps(db_data) …我正在关注 YouTube 上的 Net Ninja Vue 教程。在教程 19 中，我将介绍嵌套组件，我希望在其中使用 v-for 和 v-bind: 键显示 ul 列表。我不断收到以下错误，并且无法编译。我是 Vue 的新手，请高手帮我看看。目前我的 vue 版本是 @vue/cli 4.4.6，npm 是 6.13.4
代码
<template>
<ul>
<li v-for="(ninja, index) in ninjas" v-bind:key="index"></li>
</ul>
</template>
<script>
export default {
data () {
return {
ninjas: ['Ryu','Ken','Yoshi']
}
}
}
</script>
<style>
</style>
错误
ERROR in ./src/Ninjas.Vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <ul>
| <li v-for="(ninja, index) …我正在使用 Vue 3 beta 版本，我试图访问设置函数中的 ref，我的组件：
JS（Vue）：
const Child = createComponent({
setup () {
let tabs = ref()
console.log(tabs)
return {}
},
template: '<div ref="tabs" >Wow</div>'
})演示：https : //jsfiddle.net/xkeyLwu4/2/
但是 tabs.value 的值是未定义的。我在这里做错了什么？
所以我正在使用 Vue、Node 和 typescript。我正在获取我所有其他函数都需要的数据，因此getDataForFunction123()需要等待并且很好。
然后我有 3 个函数来获取不同的东西，而不是相互依赖。但是所有答案都被最后一个函数使用updateAfterFunction123IsDone()。但是当我像现在这样，我们需要等待功能 1、2 和 3 的同步。这需要很多时间。我想让函数 1、2 和 3 同时执行这些操作，但还想知道所有 3 项何时完成，然后调用updateAfterFunction123IsDone().
这是代码：
async initData () {
await this.getDataForFunction123();
await this.function1();
await this.function2();
await this.function3();
this.updateAfterFunction123IsDone();
}
我不认为一个Promise.all()会解决这个问题？因为它也是按顺序执行功能而不是同时执行？对？这不会节省我的时间，但会为我节省一些错误处理？
当我尝试在组件中的组件上使用 v-for 指令时，出现上述错误。
这是工作和迭代存储在参与者中的一些数据
<template>
<div
v-for="(participant, index) in participants"
v-bind:key="index"
>
hello world
</div>
</template>
但是改变这个给我上面的错误。
<template>
<Step1Item
v-for="(participant, index) in participants"
v-bind:key="index"
>
hello world
</Step1Item>
</template>
<script>
import Step1Item from "./Step1Item.vue";
export default {
name: "Step1",
components: Step1Item,
[...]
</script>
该组件是：
<template>
<div>
{{ name }}
</div>
</template>
<script>
export default {
name: "Step1Item",
props: {
name: String,
},
};
</script>
vue-component ×10
vue.js ×10
javascript ×5
vuejs2 ×4
async-await ×1
django ×1
es6-promise ×1
file ×1
import ×1
json ×1
laravel ×1
typescript ×1
vue-router ×1
vuejs3 ×1