부트스트랩 Vue 방지/취소 이벤트

부트스트랩 Vue 방지/취소 이벤트

Bootstrap Vue의 b-form-select 컨트롤이 있는 페이지가 있습니다.이 컨트롤의 값을 변경할 때 값을 변경하지 않고 이 이벤트를 취소할 수 있는 함수를 실행합니다.

더 복잡한 것은 선택 항목은 하위 구성 요소에 있고 실행하는 기능은 상위 구성 요소에 있습니다.

하위 구성 요소

public values: any[] = [
  { name: 'default'},
  { name: 'forbidden'},
  { name: 'other option' },
]

<b-form-select :value="property" @change="$emit('onPropertyChange', arguments[0])">
   <option v-for="(val, key) in values" :value="val" :key="key">{{val.Name}}</option>
</b-form-select>

부모 컴포넌트:

this.property = { name: 'default' }
public onPropertyChange(newValue) {
  if (newValue.name === 'forbidden') {
    // Not changing this.property
  } else {
    // Changing it
    this.property = newValue
  }     
}

<child :property="property" @onPropertyChange="onPropertyChange"></child>

선택 항목에서 '금지'를 선택하면선택 상자가 이 값으로 변경되었지만 하위 속성과 상위 속성에 이전 값이 남아 있습니다.어떻게 하면 이전 값을 가질 수 있을까요?

부트스트랩 Vue에 변경 이벤트에 대한 방지 한정자가 없는 것 같습니다.저도 네이티브 이벤트를 이용해봤지만 같은 문제가 있습니다.

내가 뭘 잘못하고 있나요?

금지된 옵션을 디세블로 하는 것이 선택한 값을 미심쩍게 선택하지 않도록 하는 것보다 더 나은 사용자 경험이 될 수 있지만 오래된 값을 저장하고에 복원하면 변경 이벤트핸들러로 이 동작을 설정할 수 있습니다.

주의:options와 함께 사용하기에는 적합하지 않은 구조b-form-select올바른 구조와 핸들 설정을 할 수 있는 계산을 했습니다.disabled, 및 에서 그것을 사용했습니다.b-form-select.

new Vue({
  el: '#app',
  data: {
    selected: 'default',
    options: [{
        name: 'default',
      },
      {
        name: 'forbidden'
      },
      {
        name: 'other option'
      },
      {
        name: 'what I had before'
      },
    ]
  },
  computed: {
    selectOptions() {
      return this.options.map((opt) => ({
        text: opt.name,
        value: opt.name,
        disabled: opt.name === 'forbidden'
      }));
    }
  },
  methods: {
    onChange(newValue) {
      const oldValue = this.selected;

      if (newValue === 'what I had before') {
        this.$nextTick(() => {
          this.selected = oldValue;
        });
      }
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">

  <b-form-select v-model="selected" :options="selectOptions" @change="onChange">
  </b-form-select>

  <div>Selected: <strong>{{selected}}</strong></div>

</div>

$refs와 계산된 getter/setter에 기반한 솔루션을 제안하고 싶습니다(그러나 v-bind/v-on에서도 가능합니다).이러한 기능에는, 유저에게 확인을 요구하는 등, 유효한 사용 사례가 있습니다.

<template>
    <div>
        <b-form-select
            ref="mySelect"
            v-model="choiceHandler"
            :options="selectOptions"
        >
        </b-form-select>
    </div>
</template>
<script>
export default {
    data() {
        return {
            selectOptions: [
                { value: 1, text: "Choice 1" },
                { value: 2, text: "Choice 2" },
                { value: 3, text: "Choice 3" },
            ],
            storedChoice: 3,
        };
    },
    computed: {
        choiceHandler: {
            get() {
                return this.storedChoice;
            },
            set(newValue) {
                this.$refs.typeSelect.localValue = this.storedChoice; // this reverts displayed value to the one resulting from stored value
                let confirmDialog = new Promise((resolve) => {
                    // this promise is a mockup for an asycnc dialog returning true / false
                    setTimeout(() => {
                        resolve(true);
                    }, 1500);
                });
                confirmDialog.then((res) => {
                    if (res) {
                        this.storedChoice = newValue;
                    } else console.log("No changes");
                });
            },
        },
    },
};
</script>

를 사용해야 합니다.setter사용자 변경이 데이터 모델/스토어에 전달되지 않도록 합니다.검증하기 전에localValue의b-form-select사용자 상호 작용 이전의 값으로 변경합니다.검증이 긍정적일 경우 데이터 모델의 값을 업데이트하여 Vue가 이 값을 새로 고칩니다.b-form-select그렇지 않으면 아무것도 하지 않습니다.

이 작업은 트리거될 수 있습니다.Vue warningDOM의 직접 조작에 대해서는 (여기서 정확히 무엇을 하고 있는지에 따라) 정당한 사용이라고 생각합니다만, 데이터 모델을 덮어쓰는 데이터를 표시하려고 하는 것은 아닙니다.반대로 브라우저에 아직 모델에 저장되지 않은 데이터가 표시되지 않도록 하고 있습니다.

당신은 또한 바닐라를 사용하여 같은 문제에 대한 나의 해결책을 여기에서 확인할 수 있습니다.<select>가 아닌 ) 및 "(BootstrapVuev-bind/v-on 어프로치getter/setter가

언급URL : https://stackoverflow.com/questions/54024167/bootstrap-vue-prevent-cancel-event