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



  • 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>
    
    


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


  • Admin

    @keyb2004 what version are you on?



  • @rstoenescu v0.13

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


  • Admin

    let me know how it goes.



  • @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?



  • 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.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.