vue.js-UI/單筆資料更新小試

單筆record:更新/查詢狀態下input依不同模式調整class

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
  <br/>
  <h4>
  tables:
  {{todos}}
  </h4>
  <input type="button" value="Add" class="genstyle" v-on:click="addrow">
  
  <table>
  <thead>
    <tr>
      <td>seq</td>
      <td colspan="3">content</td>          
    </tr>
  </thead>
  <tbody v-for="(row,index) in todos">
    <tr>
      <td>        
        <input type="text" v-bind:value="index+1" size="1px" class="noneborder">        
        <input type="checkbox" v-bind:checked="row.done" v-on:change="toggle(row)" v-bind:disabled="!row.editing">
        <!--<input type="text" v-model="row.text" v-bind:class="{'noneborder' : !row.editing}" v-bind:readonly="!row.editing">-->
        <span v-if="!row.editing" style="width:200px;display: inline-block;">{{row.text}}</span>
        <span v-else>
          <input type="text" v-model="row.text" style="width:193px;">
        </span>
        <span v-if="!row.editing">
          <input type="button" value="Edit" style="width:60px;" v-on:click="changemode(row)">
        </span>
        <span v-else>
          <input type="button" value="Confirm" style="width:60px;" class="genstyle" v-on:click="updaterow(row)">
          <input type="button" value="Cancel" style="width:60px;" class="genstyle" v-on:click="cancelupdate(row,index)">
        </span>        
      </td>
    </tr>
  </tbody>    
  </table>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

input.noneborder{
    border: none;
    background: transparent;
}

JavaScript

new Vue({
  el: "#app",
  data: {
    todos: [
      { id:1 ,text: "Learn JavaScript", done: false ,editing: false},
      { id:2, text: "Learn Vue", done: false ,editing: false},
      { id:3, text: "Play around in JSFiddle", done: true ,editing: false},
      { id:4, text: "Build something awesome", done: true ,editing: false}
    ],
    querymode: true
  },
  computed: {
    editmode: function(){ return !this.querymode;}
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    changemode: function(todo){	//切換單列資料狀態為編輯/一般
    	todo.editing = ! todo.editing;      
    },
    cancelupdate: function(todo,index){   //取消更新/新增 	      
      if(todo.id==""){  this.todos.splice(index,1); }
      else{
      	//若更改資料，回復原始資料(連回db)
      }
      this.changemode(todo);
    },
    updaterow: function(todo){	//更新資料
    	//1.更新資料(後端)
      //  note: 無id=>後端處理並取得值後更新.
      //2.回復資料
      //3.回復UI狀態
      this.changemode(todo);
    },
    addrow: function(){
    	this.todos.push({id: "",text: "", done: false ,editing: true});
    }
  }
});

/*
reference:
https://stackoverflow.com/questions/3447294/transparent-borderless-text-input/45544665
https://jsfiddle.net/davidnotplay/5vdczjgt/
*/