Блог

Я использую этот пакет из git hub для ввода минус плюс для vuejs, а в папке v2, например, есть пример файла с именем plusminusfield.vue, и это то, что я использовал для его использования :

  export default {
    props: {



        value: {
            default: 0,
            type: Number
        },
       base_capacity: {
            type: Number,
            required: true
        },
        min: {
             default: here I want to use the sent variable which is defined above and that is base_capacity 
 if I send a hard code like 5 it works well but I want to make it dynamic
             type:Number
        },
        max: {
            default: 22,
            type: Number
        },
    },
    data(){
        return {

            newValue: this.base_capacity,
        }
    },
  

и вот методы для минус плюс числа входных данных и управления максимальными и минимальными значениями :

 methods:{
        getNotificationClass (notification) {
            return `alert alert-${notification.type}`
        },
        mpminus: function () {
            if ((this.newValue) > this.min) {
                this.newValue = this.newValue - 1
                this.$emit('input', this.newValue)
            }

        },
        mpplus: function () {
            if (this.max === undefined || (this.newValue < this.max)) {
                this.newValue = this.newValue   1
                this.$emit('input', this.newValue)
            }
        },

    },
 watch: {
        value: {
            handler: function (newVal, oldVal) {
                this.newValue = newVal
            }
        }
    },
  

итак, если я определяю его где-либо еще и использую его в props, я получаю ошибку mutant, которую родительский компонент изменяет, и мое приложение не запускается, и если я использую вычисленное, как показано ниже, я комментирую ошибку перед ними :

 computed: {
           min() {
             return this.min ? this.min : this.base_capacity //Maximum call stack size exceeded
         }
        min : this.base_capacity // the error is base_capacity not defined
    },
  

итак, есть ли какой-либо способ, которым я передаю min для этого ввода из

Хотя принятый ответ будет работать для Vue 2.x, в Vue 3.x заводские функции prop по умолчанию больше не имеют доступа к this . Вместо этого вы можете передать props компонента в качестве аргумента функции factory:

 props: {
  ...
  baseCapacity: {
    default: 0,
    type: Number
  },
  min: {
    default: (props) => props.baseCapacity,
    type: Number
  },
  ...
},
  

Смотрите руководство по миграции: https://v3-migration.vuejs.org/breaking-changes/props-default-this.html

Вместо того, чтобы использовать его напрямую, используйте заводскую функцию и возвращайте значение.

кроме того, атрибуты HTML чувствительны к регистру.

Пример: Если вы установите атрибут как: base-capacity , Vue автоматически преобразует его в верблюжий регистр as baseCapacity для доступа к нему из скрипта.

Вот официальные документы

 Vue.component('plus-minus', {
  template: '#vplusminus',
  props: {
    value: {
      default: 0,
      type: Number
    },
    baseCapacity: {
      default: 0,
      type: Number
    },
    min: {
      default: function () {
        return this.baseCapacity 
      },
      type: Number
    },
    max: {
      default: undefined,
      type: Number
    }
  },
  data() {
    return {
      newValue: 0
    }
  },
  methods: {
    getNotificationClass(notification) {
      return `alert alert-${notification.type}`
    },
    mpplus: function() {
      if (this.max === undefined || (this.newValue < this.max)) {
        this.newValue = this.newValue   1
        this.$emit('input', this.newValue)
      }
    },
    mpminus: function() {
      console.log(this.min); // Here it is coming as 12
      if ((this.newValue) > this.min) {
        this.newValue = this.newValue - 1
        this.$emit('input', this.newValue)
      }
    }
  },
  watch: {
    value: {
      handler: function(newVal, oldVal) {
        this.newValue = newVal
      }
    }
  },
  created: function() {
    this.newValue = this.value
  }
});

new Vue({
  el: '#app'
});  

 .minusplusnumber {
  border: 1px solid silver;
  border-radius: 5px;
  background-color: #FFF;
  margin: 0 5px 0 5px;
  display: inline-block;
  user-select: none;
}

.minusplusnumber div {
  display: inline-block;
}

.minusplusnumber #field_container input {
  width: 50px;
  text-align: center;
  font-size: 15px;
  padding: 3px;
  border: none;
}

.minusplusnumber .mpbtn {
  padding: 3px 10px 3px 10px;
  cursor: pointer;
  border-radius: 5px;
}

.minusplusnumber .mpbtn:hover {
  background-color: #DDD;
}

.minusplusnumber .mpbtn:active {
  background-color: #c5c5c5;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <plus-minus :base-capacity="12" :value="16"></plus-minus>
  <plus-minus></plus-minus>
</div>

<script type="template/text" id="vplusminus">
  <div class="minusplusnumber">
    <div class="mpbtn minus" v-on:click="mpminus()">
      -
    </div>
    <div id="field_container">
      <input type="number" v-model="newValue" disabled />
    </div>
    <div class="mpbtn plus" v-on:click="mpplus()">
       
    </div>
  </div>
</script>  

Вы не должны использовать другое prop в качестве значения по умолчанию. Даже если они доступны, у вас нет гарантии относительно порядка, в котором вычисляются prop.

Лучший подход — использовать вычисляемое свойство, которое учитывает оба props, и использовать его внутри вашего компонента.

 computed: {
   minComputed () {
     return this.min ? this.min : this.base_capacity
   }
}
  

Кроме того, удалите default значение из определения min