vue 2.0如何管理vue实例的范围

Question

只是一个非常新的Vue框架，我有一个奇怪的事情是无法理解的，如下面的截图你可以看到我有两个输入，我想要完成的是使用第一个输入来过滤表中的内容，但是当我尝试用vue瞬间移动元素来覆盖它时，我会得到渲染错误。我应该使用插槽传递数据，似乎没有意义。任何人都可以指出我的代码有什么问题？

＆＃13;

＆＃13;

new Vue({
	el:'#BookCard',
});

Vue.component('canvasComponent',{
  template:'#canvasChart',
  
  data:function () {
     var sortOrders = {}; //定义sortOrders为空字典
    //forEach为columns的每一个元素执行函数内部操作
    this.columns.forEach(function (key) {
      //将columns的元素设定为key值,value值都为1
      sortOrders[key] = 1;
    });
    return {
      sortKey: '',
      sortOrders: sortOrders,
      BookJson:{},
    };


  },
  props:{
    canvasData:Array,
    columns:Array,
    filterKey:String
  },
  methods: {
    //sortBy[key]理解: 当click时执行该函数,sortBy为一个函数方法,接受key参数
    sortBy: function (key) {
      //并将参数赋值给内部变量
      this.sortKey = key; 
      //更新排序序列,调用sortOrders将key代表的列反序
      console.log(this.sortOrders[key]); // 1
      this.sortOrders[key] = this.sortOrders[key] * -1;
      console.log(this.sortOrders[key]); // -1
    },
    fetchBookData:function () {
     var item;
     var bookJson=$.getJSON('/api/book/getJson',function (data) {
      format:"json",
      item = data;
      $.each(data,function (key,val) {
         // item[key]= key;
         // item[val]= val;

      })
    });
    },
   
  },
  computed: {
    filterI: function () {
      return this.canvasData.filter((item) => {
        return item.name.match(this.filterKey);
      })
    },


},


});

new Vue({
  el:'#filterTest',
  data:{
    'keywords':[{"id":"9","name":"missy","phone":"21324234532"},   
              {"id":"3","name":"Mahama","phone":"345604542"},
              {"id":"2","name":"Bernard","phone":"241242542"}],

    canvasData:{"空间":34,"微博":30,"指导":29,"小明":28 , "图书馆": 27 , "PHP":26 , "项目" :25 ,"健康":24 , "JS" :23 ,'html' :22,'各镇': 22 ,'勋章' :21 ,'信息':20,'开发':19 , '设计':18 , '开幕式' :17 , '浏览器' :16 ,'身份':15,'图片': 14 , '中国' :13 , '伟大' :12 ,'地方':11 ,'噩梦' :10 ,'回复' :9 ,'空间' :8 , '请问' : 7 , '类库' : 6 , '激活' : 5 ,'规范' :4 ,'微软' :3 , '分割': 2 , '不错' :1 , '多个' :1, '斯蒂芬' :1, '分割' :1, '回过头' :1, '慈悲' :1, 'svg' :1, '三个' :1, '十多个' :1, '语句' :1, '写错' :1, '别冲动' :1, '请问' :1, '细长的' :1, '风光' :1, '梵蒂冈' :1, '成办' :1, '这些' :1, '是的' :1, '风格化' :1, '儿童歌' :1, '所得税' :1, '阿斯顿' :1, '斯蒂芬' :1, '电饭锅' :1, '很规范' :1, '车秩序' :1, '上网' :1, '过负荷' :1, '放到' :1, '电饭锅' :1, '东方红' :1, '风格化' :1, '请问' :1, '人头' :1, '让他' :1, '分隔' :1, '大概' :1, '福利' :1, '激活' :1, '断食' :1, '风格' :1, '瓦尔特' :1, '对方' :1,  '请问' :1, '而' :1, '人头' :1, '统一' :1, '一份' :1, '放到' :1, '放到' :1, '放到' :1, '放到' :1, '上网' :1, '我是' :1, '的' :1, '耳朵' :1, '发热' :1, '乳房' :1, '跟他' :1, '通过' :1, '还好用' :1, '雅黑' :1, '聚聚' :1, '看过' :1, '似的' :1, '独' :1, '明年' :1, '手头紧' :1, '换个' :1, '数据' :1, '导入' :1, '回归' :1},
    gridColumns:['id','name','phone'],
    searchQuery:''
  },
 

});

＆＃13;

  table {
    border: 2px solid #42b983;
    border-radius: 3px;
    background-color: #fff;
  }

  th {
    background-color: #42b983;
    color: rgba(255,255,255,0.66);
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -user-select: none;
  }

  td {
    background-color: #f9f9f9;
  }

  th, td {
    min-width: 120px;
    padding: 10px 20px;
  }

  th.active {
    color: #fff;
  }

  th.active .arrow {
    opacity: 1;
  }

  .arrow {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    margin-left: 5px;
    opacity: 0.66;
  }

  .arrow.asc {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #fff;
  }

  .arrow.dsc {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #fff;
  }

＆＃13;

<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>



<script type="text/x-template" id="canvasChart">
	<table>
    <thead>
      <tr>
        <!-- 指令(Directives)是特殊的带有前缀 v- 的特性.-->
        <!-- 指令的值限定为绑定表达式.因此JavaScript表达式及过滤器规则在这里也适用.-->
        <!-- 指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上.-->
        <!-- v-for用于渲染列表-->
        <!-- v-on的缩写用@表示,它用于监听DOM事件-->
        <!-- v-bind的缩写用:表示,v-bind指令用于响应地更新HTML特性,v-bind:class的缩写是:class,sortKey == key表达式为True时class=active-->
        <!-- 用管道符 | 来表示过滤器,capitalize表示首字母大写-->
        <th v-for="key in columns"  :class="{active: sortKey == key}">
          @{{key}}
          <span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'"></span>
          <!-- 这里用到js的判断表达式操作,sortOrders[key] > 0为真,class=asc,反之class=dsc-->
          <!-- v-bind:class 指令可以与普通的 class 特性共存 -->
        </th>
      </tr>
    </thead>
    <tbody>
      <!-- filterBy 返回过滤后的数组,第一个参数可以是字符串或函数,filterBy filterKey 输出满足条件的结果-->
      <!-- orderBy sortKey为关键字 sortOrders[sortKey]升序或者降序 -->
      <tr v-for="entry in filterI">
        <td v-for="key in columns">{{entry[key]}}</td><!--单元格-->
      </tr>
    </tbody>
  </table>
</script>
<div class="container-fluid">

	<div class="row">
				<div class="col-md-4 col-md-offset-4">
			    	<div class="input-group">
				     <input type="text" class="form-control" v-model="filter-key"  placeholder="Search for...">
				        <span class="input-group-btn">
				        <button class="btn btn-default" type="button">Go!</button>
			        </div>
			      </span>
			    </div><!-- /input-group -->
	</div>


	
	<div class="row">
	  <br>
		<div class="span10">
			<ul class="thumbnails">
			</ul>
			<blockquote class="pull-right">
				<p>
				Select the book what you want!
				</p> <small>Keyword <cite>Opensource</cite></small>
			</blockquote>
		</div>
	</div>
	<div id="filterTest">
		<div class="container">
			<input type="text" class="input-lg" v-model=searchQuery></input>
			<div class="row">
					  <canvas-component :canvas-data=keywords :columns=gridColumns :filter-key=searchQuery>
					  </canvas-component>
		  	</div>

	  	</div>
		  	
		</div>
	
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

好吧，我想回答我的问题，这是真的，只需在模板中使用slot tag internal并在表格前面添加输入脚本，所以我得到了我想要的结果，但又一次，另一个问题流行出来，这是唯一的解决方案吗？