元件複用傳值（待解決問題）

居老師的狗子發表於2019-03-12
元件

寫了一個點選列表，在prop傳入一個陣列出現了問題。

<template>
    <div id="box">
      <ul>
        <li v-for="task in list" @click="add(task)" :class="{'complated':task.finished}">
          {{task.id}}-{{task.name}}-
        </li>
      </ul>
    </div>
</template>

<script>
    export default {
        name: "TodoList-component",
      props:['list'],
      methods:{
          add:function (task) {
            task.finished = ! task.finished
          },

      }
    }
</script>

<style scoped>
.complated{
  text-decoration:line-through;
  color: green;
}
</style>
<template>
  <div id="app">
    <hello-world heading="Likes" color="green"></hello-world>
    <hello-world heading="Dislikes" color="red"></hello-world>
    <!--<to-do-list :list="tasks"> </to-do-list>-->
//直接寫tasks傳過去，點選字型變色
    <to-do-list :list="[{id:10,name:'hi',finished:false},{id:1,name:'book',finished:false}]"> </to-do-list>
//直接寫陣列，傳過去點選字型不變色
  </div>
</template>

<script>
import HelloWorld from './components/button-component'
import ToDoList from './components/TodoList-component'

export default {
  name: 'App',
  data:function () {
    return{
      tasks:[
        {id:1,name:"book",finished:false},
        {id:2,name:"app",finished:false},
        {id:3,name:"school",finished:false},
        {id:4,name:"newpapers",finished:false},

      ]
    }
  },
  components: {
    HelloWorld,
    ToDoList
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

但是檢查到點選後{id:10,name:'hi',finished:false}裡面的finished值確實改變了，繫結的:class="{'complated':task.finished}卻不起作用。後續瞭解更多了，再來解決。

 

相關文章