2017-11-16 21 views
2

Vue Tables 2과 함께 Vue2 (2.5.3)를 사용하는 프로젝트 작업 중입니다. 내가하려는 것은 linked example이 표시하는대로 각 행 주위에 앵커를 추가하고 edit() 함수를 호출하는 것입니다. 그러나 전혀 작동하지 않는 것 같으며 어떤 오류도 발생하지 않습니다. 왜 그런지 아십니까?Vue 메서드가 실행되지 않음

.vue 파일

<template> 
    <div class="col-md-8 col-md-offset-2"> 
     <div id="people"> 
      <v-client-table :data="tableData" :columns="columns"> 
       <template slot="edit" slot-scope="props"> 
        <div> 
         <a class="fa fa-edit" :href="edit(props.row.id)"></a> 
        </div> 
       </template> 
      </v-client-table> 
     </div> 
    </div> 
</template> 

<script> 
    import {ServerTable, ClientTable, Event} from 'vue-tables-2'; 
    import Vue from 'vue'; 
    import axios from 'axios'; 

    Vue.use(ClientTable, { 
     perPage: 3 
    }, false); 

    export default { 
     methods: { 
      edit: function(id){ 
       console.log("OK", id); 
      } 
     }, 
     data() { 
      return { 
       columns: ['id','name','age'], 
       tableData: [ 
        {id:1, name:"John",age:"20"}, 
        {id:2, name:"Jane",age:"24"}, 
        {id:3, name:"Susan",age:"16"}, 
        {id:4, name:"Chris",age:"55"}, 
        {id:5, name:"Dan",age:"40"} 
       ] 
      }; 
     } 
    } 
</script> 

<style lang="scss"> 
.VuePagination__count { 
    display:none; 
} 
</style> 
+0

참조 = "소품"'코드에서,이 문제가 될 수 있을까? – yuriy636

+0

'scope'의 이름이 Vue 2.5 – AnchovyLegend

답변

1

첫 번째 문제점은 설명서에서 링크를 제안하는 방식으로 전체 행을 감쌀 수 없다는 것입니다. pre-defined slots을 사용자 지정할 수 있으며 columns 속성에 전달하는 각 열의 슬롯을 사용할 수도 있습니다.

템플릿을 사용하면 vue 컴파일 된 HTML로 셀을 줄 바꿈 할 수 있습니다. 그것은 다음과 같은 방법으로 사용할 수 있습니다 세포을 말한다

참고. 따라서 열의 이름을 슬롯으로 지정하여 각 셀에 대한 템플릿을 제공 할 수 있습니다.

예제에서는 edit 열이 없으므로 아무 것도 실제로 렌더링되지 않습니다.

당신은 추가 할 수있는 editcolumns에 :

columns: ['edit', 'id','name','age'], 

그리고 템플릿이 작동 것이다 그것은 폰트 멋진 아이콘을 테이블의 열에 추가 할 것입니다.

여기에 an example입니다.

+0

Bert, 도움에 감사드립니다. 당신이 말하는 것은 의미 있고 완벽하게 작동합니다. 그러나, 나는 앵커에 전체 행을 래핑하려고하거나 어떻게 든 클릭 할 때 url에 행을 연결하려고합니다. 어떤 아이디어? – AnchovyLegend

+0

@AnchovyLegend 아니요. 나는 그것을 할 수있는 어떤 방법을 찾았고 그것을 볼 수 없었다. 글쎄, 나는 한 가지 방법을 보았다. 당신은 테이블에 대한 완전한 사용자 정의 템플릿을 제공 할 수 있습니다. 나는 네가하고 싶은 것 이상을 생각한다. – Bert

+0

@AnchovyLegend 다음은 사용자 지정 서식 파일을 지정하는 방법을 설명하는 부분입니다. https://www.npmjs.com/package/vue-tables-2#register-the-components – Bert

-2

그나마 당신의 클릭 이벤트를 트리거 앵커 태그의 HREF를 사용합니다. 또한이

<a class="fa fa-edit" href="#" v-on:click="edit(props.row.id)"></a> 

처럼합니까, 당신이 그것을했다 방법 : HREF = "편집 (props.row.id)"VUE는 href 속성에 값을 바인딩하는 데 노력하고있다. 그러나 당신이 부르는 것은 어떤 가치도 반환하지 않는 함수입니다. 개발자 콘솔에서 템플릿을 컴파일하는 것과 관련된 오류가 발생할 수 있습니다. 어쨌든 ":"은 바인딩을 의미하며 바인딩은 당신이 여기서 원하는 것을 생각하지 않습니다.

+0

에서'slot-scope'으로 변경되었습니다. 안녕하세요 Victor 님, 답장을 보내 주셔서 감사합니다. 아쉽게도 편집 이벤트가 계속 실행되지 않습니다. 만약 내가 단지 정상적인 앵커를 원한다면? – AnchovyLegend

+0

또한 값을 반환해도 아무런 차이가 없습니다./ – AnchovyLegend

0

vue-tables.row-click 이벤트를 사용할 수 있습니다. 예컨대 :

Event.$on('vue-tables.row-click', (row) => { 
    location.href = "/path/to/asset/" + row.id + "/edit"; 
}); 

가 링크 된 예는`대신`슬롯 범위를`범위 = "소품"을 사용 Linking a row in a table to a url