浏览器不弹出框

来源：2-8 简单的组件间传值

Raymond_du

2021-09-18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="vue.js"></script>
</head>



<div id="app">
    <div>
        <input v-model="inputValue"/>
        <button @click="handelSubmit">提交</button>
    </div>
    <ul>
        <todo-item
                v-bind:content="item"
                v-for="item in list"
                @delete="handleItemDelete">
        </todo-item>
    </ul>
</div>



<script>
    //全局组件
    // Vue.component('TodoItem',{
    //     props: ['content'],
    //     template: '<li> {{content}}</li>'
    // })
    //局部组件
    var TodoItem= {
        props: ['content'],
        template: "<li v-on:click='handleItemClick'>{{content}}</li>",
        methods:{
            handleItemClick:function(){
                this.$emit("delete") //向外触发事件
            },
            handleItemDelete:function(){
                alert("delete");
            }
        }
    }


    var app= new Vue({
        el: '#app',
        components: {
            TodoItem: TodoItem
        },
        data: {
            inputValue: '',
            list: []
        },
        methods: {
            handelSubmit: function () {
                this.list.push(this.inputValue)
                this.inputValue= ''
            }
        }
    })
</script>
</body>
</html>

请问哪里有问题吗
对应原文中4分50左右

写回答

1回答

慕梦前来

2021-09-19

你把子组件的template:"#ID", 然后这个ID的dom容器写到根APP中去用 <template id="ID">

<li v-on:click='handleItemClick'>{{content}}</li>

</emplate:> 这样子写

Dell

控制台看一下信息提示，有没有错误提示

2021-09-27

共1条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握

10675 学习 · 8202 问题

查看课程

相似问题

这是什么浏览器呀

回答 1

谷歌浏览器无法实现点击弹出和后续

回答 1

浏览器中怎么出现手机

回答 1

谷歌浏览器点击不出弹框

回答 2

如何用JS代码封装来实现transition过渡效果（渐隐无法实现？）

回答 1

打开慕课网App查看更多内容