^395 2022-03-20 16:52 采纳率: 33.3%
浏览 1186
已结题

Property or method "show" is not defined on the instance but referenced during render.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app" >
        <!-- 父组件 -->
        <my-parent></my-parent>
    </div>
    <!-- 父组件模板 -->
    <template id="parent">
        <div>
            <h3>手机信息搜索</h3>
            手机品牌:<input type="text" v-model='brand'>
            <!-- 子组件 -->
            <my-child v-bind:name='brand'></my-child>
        </div>
    </template>
    <!-- 子组件模板 -->
    <template id="child">
        <ul>
            <li>手机品牌:{{show.brand}}</li>
            <li>手机型号:{{show.type}}</li>
            <li>市场价格:{{show.price}}</li>
        </ul>
    </template>
    <script>
        //文本框双向绑定
        //将数据传递到子组件中
        //子组件监听传递过来的数据，渲染结果
        Vue.component('my-parent',{
            template:'#parent',
            data(){
                return{
                    brand:''
                }

            }
        })
        Vue.component('my-child',{
            props:['name'],
            template:'#child',
            data(){
                return{
                    content:[
                        {
                        brand:'华为',
                        type:'Mate20',
                        price:3699
                    },
                    {
                        brand:'苹果',
                        type:'iPhone7',
                        price:2949
                    },
                    {
                        brand:'三星',
                        type:'Galaxy S8+',
                        price:3299
                    }
                ]
                }
            },
            watch:{
                name(){
                    if(this.$props.name){
                        var found=false;
                        this.content.forEach(
                            (value,index)=>{
                                if(value.brand==this.$props.name){
                                    found=value;
                                }
                            }
                        );
                        this.show=found ? found : {
                            brand:'',
                            type:'',
                            price:''
                        }
                    }
                }

            }
        })
        
        var vm=new Vue({
            el:'#app',
            data:{

            }
        })
    </script>
    
</body>
</html>
  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-03-20 17:25
    关注

    my-child组件数据添加show数据

    img


    改下面就可以了

    img

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 父组件 -->
        <my-parent></my-parent>
    </div>
    <!-- 父组件模板 -->
    <template id="parent">
        <div>
            <h3>手机信息搜索</h3>
            手机品牌:<input type="text" v-model='brand'>
            <!-- 子组件 -->
            <my-child v-bind:name='brand'></my-child>
        </div>
    </template>
    <!-- 子组件模板 -->
    <template id="child">
        <ul>
            <li>手机品牌:{{show.brand}}</li>
            <li>手机型号:{{show.type}}</li>
            <li>市场价格:{{show.price}}</li>
        </ul>
    </template>
    <script>
        //文本框双向绑定
        //将数据传递到子组件中
        //子组件监听传递过来的数据，渲染结果
        Vue.component('my-parent',{
            template:'#parent',
            data(){
                return{
                    brand:''
                }

            }
        })
        Vue.component('my-child',{
            props:['name'],
            template:'#child',
            data(){
                return {
                    show:{},
                    content:[
                        {
                        brand:'华为',
                        type:'Mate20',
                        price:3699
                    },
                    {
                        brand:'苹果',
                        type:'iPhone7',
                        price:2949
                    },
                    {
                        brand:'三星',
                        type:'Galaxy S8+',
                        price:3299
                    }
                ]
                }
            },
            watch:{
                name(){
                    if(this.$props.name){
                        var found=false;
                        this.content.forEach(
                            (value,index)=>{
                                if(value.brand==this.$props.name){
                                    found=value;
                                }
                            }
                        );
                        this.show=found ? found : {
                            brand:'',
                            type:'',
                            price:''
                        }
                    }
                }

            }
        })

        var vm=new Vue({
            el:'#app',
            data:{

            }
        })
    </script>

</body>
</html>

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 3月28日
  • 已采纳回答 3月20日
  • 创建了问题 3月20日

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。