Vue 不会在我的组件的 mustache 模板 ( ) 中呈现内容
Posted
技术标签:
【中文标题】Vue 不会在我的组件的 mustache 模板 ( ) 中呈现内容【英文标题】：Vue doesn't render content in my component's mustache templates ( )Vue 不会在我的组件的 mustache 模板 ( ) 中呈现内容 【发布时间】：2018-06-04 03:02:52 【问题描述】：我整天都在努力解决这个问题。出现以下问题，我的小胡子护腕组件没有在我的网站上呈现。我只是将括号中未渲染的组件作为输出。
//app.js
//
import Vue from 'vue'
new Vue(
//We want to target the div with an id of 'events'
el: '#events',
//Here we can register any values or collections that hold data
//for the application
data:
event:
name: '',
description: '',
date: ''
,
events: []
,
// Anything within the ready function will run when the application loads
ready: function()
//When application loads, we want to call the method that initializies
//some data
this.fetchEvents();
,
// Methods we want to use in our application are registered here
methods:
//We dedicate a method to retrieving and setting some data
fetchEvents: function()
// body...
var events = [
id: 1,
name: 'TIFF',
description: 'Toronto International Film Festival',
date: '2015-09-10'
,
id: 2,
name: 'The Martian Premiere',
description: 'The Martian comes to theatres',
date: '2015-10-02'
,
id: 3,
name: 'SXSW',
description: 'Music, film and interactive festival in Austin, TX'
date: '2016-03-11'
];
//Set is a convenience method provided by Vue that is similar to pushing
//data onto an array
this.$set('events', events);
,
//Adds an event to the existing events array
addEvent: function()
if (this.event.name)
this.events.push(this.event);
this.event =
name: '',
description: '',
date: ''
;
deleteEvent: function(index)
if (confirm("Are you sure you want to delete this Event?"))
//$remove is a Vue convenience method similar to splice
this.events.$remove(index);
);
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- navigation bar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i>Vue Events Bulletin</a>
</div>
</nav>
<!-- main body of our application -->
<div class="container" id="events">
<!-- add an event form -->
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Add an Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on:click="addEvent()">Submit</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<a href="#" class="list-group-item" v-repeat="event in events">
<h4 class="list-group-item-heading">
<i class="glyphicon glyphicon-bullhorn"></i> event.name
</h4>
<h5>
<i class="glyphicon glyphicon-calender" v-if="event.date"></i> event.date
</h5>
<p class="list-group-item-text" v-if="event.description"> event.description </p>
<button class="btn btn-xs btn-danger" v-on:click="deleteEvent($index)">Delete</button>
</a>
</div>
</div>
</div>
<!-- JS -->
<!--<script src="node_modules/vue/dist/vue.js"></script> -->
<!--<script src="node_modules/vue-resource/dist/vue-resource.js"><!--</script> -->
<!--<script src="app.js"></script> -->
</body>
【问题讨论】：
假设您使用的是 Vue 2。在 Vue 2 中，$set 接受三个参数。在这种情况下也是不必要的。将this.$set('events', events); 更改为this.events = events。此外，正如下面的答案中提到的，ready 不是 Vue 2 生命周期处理程序，或者$index 有效。我建议你通读 Vue 2 的文档。
感谢您抽出宝贵时间查看它，我将您建议的内容更改为 this.events = events 并将删除功能注释掉，因为我只想满足现在呈现的小胡子护腕。另外，如果我能找到我做错的任何解决方案，但我仍然会阅读 Vue 2 文档，但到目前为止还没有成功。还是一样的结果。但是感谢您的帮助，非常感谢！ :)
【参考方案1】：
我能够让应用程序运行！这是工作代码，以防有人遇到类似的事情！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bulletin Board</title>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> -->
<!-- <meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i>Vue Events Bulletin</a>
</div>
</nav>
<!-- main body of our application -->
<div class="container" id="app">
<div class="col-sm-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3>Add an Event</h3>
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control" placeholder="Event Name" v-model="event.name">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Event Description" v-model="event.description"></textarea>
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="Date" v-model="event.date">
</div>
<button class="btn btn-primary" v-on:click="addEvent()">Submit</button>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="list-group">
<a href="#" class="list-group-item" v-for="event in events">
<h4 class="list-group-item-heading">
<i class="glyphicon glyphicon-bullhorn"></i>
event.name
</h4>
<h5>
<i class="glyphicon glyphicon-calender" v-if="event.date"></i>
event.date
</h5>
<p class="list-group-item-text" v-if="event.description"> event.description </p>
<button class="btn btn-xs btn-danger" v-on:click="deleteEvent($index)">Delete</button>
</a>
</div>
</div>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
还有app.js
new Vue(
el: '#app',
data:
event:
name: '',
description: '',
date: ''
,
events: []
,
mounted: function()
//alert('mounted')
this.fetchEvents();
,
methods:
fetchEvents: function()
var events = [
id: 1,
name: 'TIFF',
description: 'Toronto International Film Festival',
date: '2015-09-10'
,
id: 2,
name: 'The Martian Premiere',
description: 'The Martian comes to theatres',
date: '2015-10-02'
,
id: 3,
name: 'SXSW',
description: 'Music, film and interactive festival in Austin, TX',
date: '2016-03-11'
];
this.events = events;
,
//Adds an event to the existing events array
addEvent: function()
if (this.event.name)
this.events.push(this.event);
this.event =
name: '',
description: '',
date: ''
;
,
deleteEvent: function (index)
if (confirm('Are you sure you want to delete this event?'))
this.events.splice(index, 1);
// body...
);
【讨论】：
以上是关于Vue 不会在我的组件的 mustache 模板 ( ) 中呈现内容的主要内容，如果未能解决你的问题，请参考以下文章