question
the parent component passes a value to the child component, and the child component receives the modified value. Why did it report an error when writing a click event to that value
event runs when clicking changeTitle event, but why does the error report
related codes
APP.vue
<template>
<div id="app">
<index v-bind:list="list" v-bind:Title="Title"></index>
<other v-bind:Title="Title"></other>
<footer class="footer display-flex">
<a href="javacript:void(0);" class="box-flex" v-for="(footer,index) in Footers" :key="footer.id"
:class="{active:index == num}" @click="nav(index)">{{footer}}</a>
</footer>
</div>
</template>
<script>
import index from "./components/index"
import other from "./components/other"
export default {
name: "App",
data() {
return {
Footers: ["", "", "", ""],
isTrue: false,
num:0,
Title:"APP.vue",
list: [{
image: "/static/image/nav-icon (1).png",
name: ""
},
{
image: "/static/image/nav-icon (2).png",
name: ""
},
{
image: "/static/image/nav-icon (3).png",
name: ""
}
,
{
image: "/static/image/nav-icon (4).png",
name: ""
}
,
{
image: "/static/image/nav-icon (5).png",
name: ""
}
]
}
},
methods: {
nav(index) {
this.num=index
}
},
components: {
index,
other
}
}
</script>
index.vue
<template>
<div class="index">
<h1 >{{title1}}</h1>
<p @click="changeTitle">{{Title}}
<img src="../assets/image/banner (1).jpg" />
<ul class="list">
<li class="list-item" v-for="item in list" :key="item.id">
<span class="item-icon">
<img v-bind:src="item.image"/>
</span>
{{item.name}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "index",
// props:["list"],
props: {
list: {
type: Array,
required: true
},
Title:{
type:String
}
},
data() {
return {
title1: "",
}
},
methods: {
changeTitle:function () {
this.Title=""
}
},
}
</script>
other.vue
<template>
<div class="other">
<h2>{{Title}}</h2>
</div>
</template>
<script>
export default {
name:"other",
props: {
Title: {
type: String,
},
},
data() {
return {
}
},
}
</script>