use v-model in <q-toggle> and <q-checkbox>, but the binding variable doesn't work.

keyb2004

Screen

I used the component VUE-draggable and <q-checkbox>， but when I dragged the row, things above happened.
As you see, the HTML native component checkbox shows properly, but <q-toggle> and <q-checkbox> goes wrong.

Is it a bug or just I did something wrong on it ?

// RadioProperty.vue

<template>
  <div class="item-property">
    <hr>

    <strong class="caption keyword-style">题干设置</strong>
    <div class="row justify-between items-center">
      <caption>题干：</caption>
      <div class="auto">
        <input v-model.trim="edItem.stem" placeholder="请填写题干内容" class="full-width">
      </div>
    </div>
    <div class="row justify-between items-center">
      <caption>备注：</caption>
      <div class="auto">
        <input v-model.trim="edItem.description" placeholder="请填写备注说明内容" class="full-width">
      </div>
    </div>

    <strong class="caption keyword-style">选择支设置</strong>

    <div class="row justify-between items-center">
      <div class="choice-title auto round-borders">选项内容</div>
      <div class="choice-title round-borders" style="width: 60px">选项值</div>
      <div class="choice-title round-borders" style="width: 60px" v-if="edItem.requirePicture">插入图片</div>
      <div class="choice-title round-borders" style="width: 60px" v-if="edItem.requireDescription">要求描述</div>
      <div class="choice-title round-borders" style="width: 60px" v-if="edItem.requireRandomness">不随机</div>
    </div>


    <draggable v-model="edItem.choices" :options="optItems">
      <div class="row justify-between items-center"
           v-for="(choice, index) in edItem.choices"
           :key="index">
        <div class="choice-row auto">
          <div class="row justify-between items-center">
            <i class="iconfont icon-handle"></i>
            <input v-model.trim="choice.text" type="text" class="full-width">
            <i class="iconfont icon-delete" @click="deleteChoice(index)"></i>
          </div>
        </div>
        <div class="choice-row" style="width: 60px">
          <input v-model.number="choice.value" type="number" style="text-align: center">
        </div>
        <div class="choice-row" style="width: 60px" v-if="edItem.requirePicture">
          <i class="iconfont icon-picture"></i>
        </div>
        <div class="choice-row" style="width: 60px" v-if="edItem.requireDescription">
          <!--<q-checkbox v-model="choice.isDescriptive"></q-checkbox>-->
          <input type="checkbox" v-model="choice.isDescriptive">
        </div>
        <div class="choice-row" style="width: 60px" v-if="edItem.requireRandomness">
          <q-checkbox v-model="choice.isFixed"></q-checkbox>
        </div>
      </div>
    </draggable>

    <button class="primary small" @click="addChoice" style="margin-right: 10px">添加选项</button>
    <div class="row justify-center items-start">
      <label class="width-1of4">
        <q-toggle v-model="edItem.requirePicture"></q-toggle>
        是否需要在选项中插入图片
      </label>
      <label class="width-2of4">
        <q-toggle v-model="edItem.requireDescription"></q-toggle>
        是否在被选中后要求被访者填写说明（可用于添加如“其它____”）
      </label>
      <label class="width-1of4">
        <q-toggle v-model="edItem.requireRandomness"></q-toggle>
        是否需要将选项随机排列
      </label>
    </div>

    <br>
    <div class="center">
      <button class="primary small" @click="saveProperty" style="margin-right: 10px">确定</button>
      <button class="secondary small" @click="saveCancel" style="margin-left: 10px">取消</button>
    </div>

    <!--

        <div class="row">
          <div class="auto">
          <pre>
            {{ edItem }}
          </pre>
          </div>
          <div class="auto">
          <pre>
            {{ testOpt }}
          </pre>
          </div>
        </div>

    -->
  </div>
</template>

<script>

  import {mapGetters, mapActions} from 'vuex';
  import {cloneObject} from '../utils/utils.js';
  import SaveProperty from './SaveProperty.vue';
  import draggable from 'vuedraggable';

  export default {
    components: {
      draggable,
      SaveProperty
    },
    props: ['item'],
    data () {
      return {
        edItem: {},
        optItems: {
          animation: 100,
          handle: '.icon-handle',
          group: {name: 'choices'},
          pull: false,
          put: false,
        }
      }
    },
    beforeMount () {
      // 将传递的题目数据复制到临时变量中进行编辑
      this.edItem = cloneObject(this.item);
    },
    methods: {
      ...mapActions([
        'setEditItem',
        'updateItem'
      ]),
      deleteChoice (index) {
        this.edItem.choices.splice(index, 1);
      },
      addChoice () {
/*        this.edItem.choices.push({
          value: () => {Math.max.apply(Math, this.edItem.choices.value)},
          text: "",
          picture: "",
          isDescriptive: false,
          isFixed: false
        });*/
        console.log(Math.max.apply(null, this.edItem.choices.value));
      },
      saveProperty() {
        this.setEditItem();
        this.updateItem({order: this.edItem.order, newItem: this.edItem});
      },
      saveCancel() {
        this.setEditItem();
      }
    },
    computed: {
    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "../themes/comm.styl"

  .choice-title
    background #D9EDF7
    border 1px solid #BCE8F1
    color $primary
    margin 3px
    text-align center
    line-height 2rem

  .choice-row
    margin 3px
    text-align center
    line-height 0.8rem

  .icon-handle
    cursor move

  .icon-delete
    cursor pointer

</style>

keyb2004

But I found the binding variable’ value is correct. Is there a way to force refresh v-model variables ?

rstoenescu

@keyb2004 what version are you on?

keyb2004

@rstoenescu v0.13

But I am going to try it on v0.14.

rstoenescu

let me know how it goes.

keyb2004

@rstoenescu OK.
Is there a better way to upgrade my project on v0.13 ? Or just run CLI and copy all the codes from the old project to the empty new project?

keyb2004

Screen

This means v0.14 works properly. : )

And also means there’s a lot of jobs need to be done. : (

Wish the upgrade guide comes soon.

danielmr

how could change of color border about q-input you when you pass mouse color change to a color aqua pls how can i do this?

No More Posting New Topics!

use v-model in <q-toggle> and <q-checkbox>, but the binding variable doesn't work.