vue2 computed
computed: {
FBAAddressListComputed2 () {
if (!noFbaInput) return receiveAddressList.value
const lowerCaseInput = fbaInput.value.toLowerCase()
return receiveAddressList.value.filter((item) => {
return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city, item.address].some(
(field) => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1
)
})
}
},
watch: {
orgOwner (newVal) {
this.init(newVal)
},
form: {
handler: function (newVal, oldVal) {
const { pickUpAddress, pickUpTime, warehouseId, addressValue } = newVal
if (!Object.keys(addressValue).length) return
},
deep: true
},
},
vue3 computed vue3
import { ref, onMounted, watch, reactive, computed } from 'vue'
watch(fbaInput, newV => {
if (!fbaInput.value) return (searchFbaList.value = FBAAddressList.value)
const lowerCaseInput = fbaInput.value.toLowerCase()
searchFbaList.value = FBAAddressList.value.filter(item => {
return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city, item.address].some(
field => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1
)
})
})
// 监视ref所定义的多个响应式数据
watch([sum, msg], (newValue, oldValue) => {
console.log("sum/msg ==> ", newValue, oldValue);
},{immediate:true});
// 监听对象中的某个值
watch(
() => obj.value.name,
(newValue, oldValue) => {
console.log(`Name changed from ${oldValue} to ${newValue}`);
}
);
// 或者使用深度监听
watch(
obj,
(newVal, oldVal) => {},
{ deep: true }
);
const FBAAddressListComputed2 = computed(() => {
if (!noFbaInput) return receiveAddressList.value
const lowerCaseInput = fbaInput.value.toLowerCase()
return receiveAddressList.value.filter(item => {
return [item.fbaCode, item.zipCode, item.countryCode, item.state, item.city, item.address].some(
field => field && field.toLowerCase().indexOf(lowerCaseInput) !== -1
)
})
})