vue新手求助。v-for和v-if在同级渲染出多个元素,如何单独更改其中一个元素的显示/隐藏

roc_young 发布于 2017/06/09 14:38
阅读 4K+
收藏 0

在自制一个能增删改的todolist练手,模仿www.todolist.cn,做到重新编辑todo内容时卡住了,在官方没总结出解决方案,所以在这里求助。以下。点击文字变成input修改,但效果是这样的
因为我v-if绑定的是同一个变量,所以肯定会全局改掉,但对vue的理解太浅,想不到有效的办法。
代码:`

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>NBtodoList</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<style>
    body{
        background: #CDCDCD;
    }
    header{
        height: 50px;
        line-height: 50px;
        background: #323232;
    }
    .headerForm label{
        color: #DDDDDD;
        font-size: 20px;
        cursor: pointer;;
    }
    .headerForm input{
        margin-top: 8px;
    }
    .h2{
        font-weight: bold;
        margin: 20px 0;
    }
    section{
    }
    li,ul,ol{
        list-style: none;
    }
    .oLi{
        height: 40px;
        background: #fff;
        border-radius: 5px;
        line-height: 40px;
        border-left: 5px solid #629A9C;
        margin-bottom: 10px;
    }
    .oLi .check{
        width: 22px;
        height: 22px;
        margin: 9px;
    }
    .oLi p{
        height: 40px;
    }
    .oLi *{
        padding: 0;
    }
    .oLi i{
        text-align: center;
        line-height: 40px;
        font-size: 18px;
    }
    .oLi span{
        cursor: pointer;
    }
    .oLi .txt{
        line-height: 50px;
        display: inline-block;
        padding-left: 5px;
    }
    ul{
        padding-left: 0;
    }
</style>
</head><body>

<div id="app">
    <header class="container-fluid">
        <div class="container">
            <div class="headerForm form-group center-block clearfix">
                <label for="todocontent" class="pull-left col-xs-3">ToDoList</label>
                <div class="col-xs-9 pull-right">
                    <input autofocus type="text" id="todocontent" class="form-control" v-model='todoText' v-on:keyup.enter='addTodo' placeholder="添加ToDo">
                </div>
            </div>
        </div>
    </header>
    <section class="container">
        <div class="center-block" style="padding: 0 15px">
            <my-h2 v-bind:num='noNum' status='正在进行'></my-h2>
            <ul>
                <my-li v-for='(todo,index) in todoList' v-bind:to='todo' v-on:deltodo='deltodos(index)' v-on:todook='dotoDown(index)' v-on:childrevamp="revamp" v-bind:childisrevamp="isRevamp"></my-li>
            </ul>
            <my-h2 v-bind:num='okNum' status='已经完成'></my-h2>
            <ul>
                <my-li style="opacity: .5" v-for='(oktodo,index) in oktodoList' v-bind:childchecked="checked" v-bind:okto='oktodo' v-on:deltodo='deloktodos(index)' v-on:todook='dotoUp(index)' childisrevamp="ture"></my-li>
            </ul>
        </div>
    </section>
</div>
</body><script>

Vue.component('my-li',{
    props:['to','okto','childchecked','childisrevamp'],
    template: '<li class="oLi"><input type="checkbox" v-model="childchecked"  v-on:change="todook" class="check col-xs-1"/><p class="pull-left col-xs-10"><span v-on:click="childrevamp" v-if="childisrevamp">{{to}}{{okto}}</span><input v-on:blur="childrevamp"  v-if="!childisrevamp" class="txt form-control"></input></p><i href="#" v-on:click="deltodo" class="pull-right col-xs-1 glyphicon glyphicon-remove"></i></li>',
    methods: {
        childAddTodo: function(){
            this.$emit('childAddTodo')
        },
        deltodo: function(){
            this.$emit('deltodo');
        },
        todook: function(){
            this.$emit('todook');
        },
        childrevamp: function(){
            this.$emit('childrevamp');
        }
    }
})
Vue.component('my-h2',{
    props: ['num','status'],
    template: '<h2 class="h2">{{status}}<span class="pull-right badge" style="margin-top: 8px;">{{num}}</span></h2>'
})
new Vue({
    el: '#app',
    data: {
        todoText: '',
        todoList: [],
        okTodoText: '',
        oktodoList: [],
        noNum: 0,
        okNum: 0,
        checked: true,
        isRevamp: true
    },
    methods: {
        addTodo: function(){
            this.todoText.trim() ? this.todoList.push((this.todoText).trim()) : alert('你输嘞不对~');
            localStorage.notodo = JSON.stringify(this.todoList);
            this.noNum = this.todoList.length;
            this.todoText = '';
        },
        deltodos: function(index){
            this.todoList.splice(index,1);
            localStorage.notodo = JSON.stringify(this.todoList);
            this.noNum = this.todoList.length;
        },
        deloktodos: function(index){
            this.oktodoList.splice(index,1);
            localStorage.oktodo = JSON.stringify(this.oktodoList);
            this.okNum = this.oktodoList.length;
        },
        dotoDown: function(index){
            this.oktodoList.push(this.todoList[index]);
            localStorage.oktodo = JSON.stringify(this.oktodoList);
            this.deltodos(index);
            this.okNum = this.oktodoList.length;
        },
        dotoUp: function(index){
            this.todoList.push(this.oktodoList[index]);
            localStorage.notodo = JSON.stringify(this.todoList);
            this.deloktodos(index);
            localStorage.oktodo = JSON.stringify(this.oktodoList);
            this.noNum = this.todoList.length;
        },
        revamp: function(){
            this.isRevamp = !this.isRevamp;
        }
    },
    created:function(){
        this.todoList = localStorage.notodo ? JSON.parse(localStorage.notodo) : [];
        this.oktodoList = localStorage.oktodo ? JSON.parse(localStorage.oktodo) : [];
        this.noNum = this.todoList.length;
        this.okNum = this.oktodoList.length;
    }
})
</script>
</html>


有什么办法能够在触发revamp事件后只让当前的span隐藏,input显示呢?求大牛指教!

加载中
0
LCJAE46A1D
LCJAE46A1D
<!--demo.vue 我也菜鸟 这是我个人思路-->
<template>
  <div class="box">
    <div class="box-w100">
      
      <div class="modal-content">
        <table class="product-table">
          <thead id="fixed-header">
            <th class="nowrap">单號</th>
            <th>名稱</th>
            <th>電話</th>
            <th class="text-center">详情</th>
            <th class="text-center">操作</th>
          </thead>
          <template v-for="(order,index) in orderlist">
            <!--如果是修改状态 且修改的index对应则显示修改框-->
            <tr v-if="isupdate && updateindex==index">
              <td>
                <input v-model="order.ordernumber" class="underline-input"></input>
              </td>
              <td >
                <input v-model="order.name" class="underline-input"></input>
              </td>
              <td>
                <input v-model="order.phone" class="underline-input"></input>
              </td>
              <td class="nowrap text-center">
                <input v-model="order.detail" class="underline-input"></input>
              </td>
              <td>
                <button v-on:click="submitupdate">保存</button> {{index}} <button v-on:click="cancelupdate">取消</button>
              </td>
            </tr>
            <tr v-else><!--否则显示-->
              <td>{{order.ordernumber}}</td>
              <td >{{order.name}}</td>
              <td>
                {{order.phone}}
              </td>
              <td class="nowrap text-center">
                {{order.detail}}
              </td>
              <td >
                <button v-if="!isupdate" v-on:click="removeorder(index)">删除</button> {{index}} <button v-on:click="openupdate(index)">修改</button>
              </td>
            </tr>
          </template>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
  name: 'searchorder',
  data(){
  return{
  isupdate:false,//控制是否是修改操作
  updateindex:0,//控制显示哪个修改input
  orderlist:this.getdata()//测试数据
  }
  },
  methods:{
  getdata:function(){
  var arry=[];  
  for(let i=0;i<50;i++){
  let order={ordernumber:i+"01111058745",name:i+"理",phone:i+"13631284408",detail:"洗发水、沐浴露"};
  arry.push(order);
  }
  return arry;
  },
  removeorder:function(index){
  if(!this.isupdate){
  if(confirm("确定删除吗?")){
  this.orderlist.splice(index, 1);
  }
  }
  },
  openupdate:function(index){
  if(!this.isupdate)this.isupdate=true;//显示修改框
  this.updateindex=index;//显示对应的修改框
  },
  submitupdate:function(){
  if(this.isupdate)this.isupdate=false;//隐藏修改框
  },
  cancelupdate:function(){
  if(this.isupdate)this.isupdate=false;
  this.orderlist=this.getdata();
  },

  }
  }
</script>

<style>
</style>

 

返回顶部
顶部