Javascript 如何访问各种元素中的对象值以显示事件数据？_Javascript_Twitter Bootstrap_Vue.js

Javascript 如何访问各种元素中的对象值以显示事件数据？

javascript twitter-bootstrap vue.js

Javascript 如何访问各种元素中的对象值以显示事件数据？,javascript,twitter-bootstrap,vue.js,Javascript,Twitter Bootstrap,Vue.js,我正在使用vue.js构建一个事件管理应用程序。问题是我无法将列表组中每个事件的值呈现给DOM。它只是不断地将花括号表达式呈现给DOM 以下是Js小提琴：事件管理 //app.js 新Vue({ //我们希望以id为“events”的div为目标 el:'事件'， //在这里，我们可以注册保存数据的任何值或集合 //申请数据：{ 活动：{ 名称：“”，说明：“”，日期：'' }, 事件：[] }, //当应用程序加载时，ready函数中的任何内容都将运行就绪：函数（）{ //当应用

我正在使用vue.js构建一个事件管理应用程序。问题是我无法将列表组中每个事件的值呈现给DOM。它只是不断地将花括号表达式呈现给DOM

以下是Js小提琴：


事件管理
//app.js
新Vue({
//我们希望以id为“events”的div为目标
el:'事件'，
//在这里，我们可以注册保存数据的任何值或集合
//申请
数据：{
活动：{
名称：“”，
说明：“”，
日期：''
},
事件：[]
},
//当应用程序加载时，ready函数中的任何内容都将运行
就绪：函数（）{
//当应用程序加载时，我们希望调用初始化的方法
//一些数据
this.fetchEvents（）；
},
//我们希望在应用程序中使用的方法在此处注册
方法：{
//我们专门使用一种方法来检索和设置一些数据
fetchEvents:function（）{
var事件=[{
id:1，
名称：“TIFF”，
描述：'多伦多国际电影节'，
日期：2015-09-10
},
{
id:2，
名称：“火星首映式”，
描述：“火星人来到剧院。”，
日期：“2015-10-02”
},
{
id:3，
名称：“SXSW”，
描述：“德克萨斯州奥斯汀音乐、电影和互动节”，
日期：2016-03-11
}
];
//$set是Vue提供的一种方便方法，类似于推送
//将数据存储到数组中
此.$set（'events'，events'）；
},
//将事件添加到现有事件数组中
addEvent:function（）{
if（this.event.name）{
this.events.push（this.event）；
此事件={
名称：“”，
说明：“”，
日期：''
},
}
}
}
});

提前谢谢你的帮助

首先：您没有正确地包含Vue。将其包含在

中，并在JSFIDLE中只包含一个脚本url，而不包含标记

第二：您的事件绑定语法错误：您正在尝试

v-on=“click:addEvent”

，但正确的语法是

v-on:click=“addEvent（$event）”

——在本例中，您还将

$event

传递给您的方法，并提取如下值：

$event.target.value

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>events Management</title>
</head>
<body>

 <!-- Latest compiled and minified CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 <!-- Optional theme -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

 <script src="https://unpkg.com/vue"></script>

  <!-- navigation bar -->
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand"><i class = ""></i>  events Management </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>

    <!-- show the events -->
    <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-calendar" 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>




 // app.js

   <script>
    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 the application loads, we want to call the method that initializes
            // 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() {
                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: ''
                    },
                }
            }
        }
    });
     </script>
 </body>
</html>
  <!-- JS -->