当我添加新的动态选择并选择选择数组中已有的相同选项时。
示例：
{ id: '1', name: 'Contact Info > Provide Email Address', value: '0.05' }
我得到的默认选项是
{ id: '0', name: 'Please Select an action', value: '0' }
但我想获得我选择的选项
{ id: '1', name: 'Contact Info > Provide Email Address', value: '0.05' }
所以我不能在 selects 数组中多次传递相同的值。
我的代码
<div class="col-span-6 grid md:grid-cols-1 md:grid-cols-6 gap-2 mt-5 px-5 py-2 bg-gray-50 shadow rounded">
<div class="mt-2 col-span-6 md:col-span-3" v-for="(select, index) in selects" :key="index">
<label for="actions" class="block text-sm font-medium text-gray-700 mb-2">
Actions: <span v-if="index > 0">(Optional)</span>
</label>
<div class="flex justify-center mt-1 gap-2">
<select v-model="select.id" @change="changeOption(select.id, select.id)" name="actions[]" class="appearance-none rounded-md relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Task Action">
<option v-for="option in options" :key="option.id" :value="option.id" disabled>{{ option.name }}</option>
</select>
<button @click.prevent="remove(index)" v-if="index > 0" class="bg-red-50 text-red-600 px-2 py-2 rounded">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="col-span-6">
<button @click.prevent="addselect(index)" class="bg-green-600 text-white px-2 py-2 mt-3 rounded">Add Actions</button>
</div>
</div>
<script>
import axios from 'axios';
export default {
data() {
return {
selectedActions: [],
options: [{
id: '0',
name: 'Please Select an action',
value: '0'
},
{
id: '1',
name: 'Contact Info > Provide Email Address',
value: '0.05'
},
{
id: '2',
name: 'Contact Info > Provide Phone Number',
value: '0.05'
},
{
id: '3',
name: 'Contact Info > Provide Zip Code',
value: '0.02'
},
{
id: '4',
name: 'Engagement > Copy and paste something',
value: '0.01'
},
{
id: '5',
name: 'Engagement > Click on an Ad',
value: '0.02'
},
{
id: '6',
name: 'Engagement > Click on an Button',
value: '0.01'
},
{
id: '7',
name: 'Engagement > Copy & Paste a comment',
value: '0.03'
},
{
id: '8',
name: 'Engagement > Stay on a page per 1 minute',
value: '0.01'
},
{
id: '9',
name: 'Engagement > Fill out a form up to 5 fields',
value: '0.01'
},
{
id: '10',
name: 'Engagement > Watch a video per 1 minute',
value: '0.01'
},
{
id: '11',
name: 'Engagement > Search for something',
value: '0.01'
},
{
id: '12',
name: 'Engagement > Make a Faucet Claim',
value: '0.01'
},
{
id: '13',
name: 'Engagement > Use App/Website per 1 minute',
value: '0.01'
},
{
id: '14',
name: 'Engagement > Give a Star Rating',
value: '0.01'
},
{
id: '15',
name: 'Engagement > Refresh the page',
value: '0.01'
},
{
id: '16',
name: 'Engagement > Vote',
value: '0.01'
},
{
id: '17',
name: 'Engagement > Complete a Quiz per 5 questions',
value: '0.01'
},
{
id: '18',
name: 'Mobile Apps > Install and Open',
value: '0.01'
},
{
id: '19',
name: 'Mobile Apps > Play a Game',
value: '0.01'
},
{
id: '20',
name: 'Mobile Apps > Reach a level in a game',
value: '0.01'
},
{
id: '21',
name: 'Mobile Apps > Give Honest App Rating (50 word max)',
value: '0.01'
},
{
id: '22',
name: 'Mobile Apps > Give Honest App Rating (25 word max)',
value: '0.01'
},
{
id: '23',
name: 'Other > SMS Verification',
value: '0.01'
},
{
id: '24',
name: 'Other > Record a video per 1 minute',
value: '0.01'
},
{
id: '25',
name: 'Other > Confirm Email',
value: '0.01'
},
{
id: '26',
name: 'Other > KYC Submit',
value: '0.01'
},
{
id: '27',
name: 'Other > Complete one survey or offer up to $1',
value: '1'
},
{
id: '28',
name: 'Other > Download & Install Desktop Software',
value: '0.2'
},
{
id: '29',
name: 'Other > Install Browser Extension',
value: '0.01'
},
{
id: '30',
name: 'Other > Free Trial',
value: '0.01'
},
{
id: '31',
name: 'Other > Complete one survey or offer up to $0.20',
value: '0.2'
},
{
id: '32',
name: 'Register > Signup with Social Media',
value: '0.01'
},
{
id: '33',
name: 'Register > Signup with Email or Social Media',
value: '0.01'
},
{
id: '34',
name: 'Social Media > Like',
value: '0.01'
},
{
id: '35',
name: 'Social Media > Upvote',
value: '0.01'
},
{
id: '36',
name: 'Social Media > Follow',
value: '0.01'
},
{
id: '37',
name: 'Social Media > Subscribe',
value: '0.01'
},
{
id: '38',
name: 'Social Media > Save button click',
value: '0.01'
},
{
id: '39',
name: 'Social Media > Add as friend',
value: '0.01'
},
{
id: '40',
name: 'Social Media > Share or Retweet',
value: '0.01'
},
{
id: '41',
name: 'Social Media > Direct Message',
value: '0.01'
},
{
id: '42',
name: 'Social Media > Post on Wall/Timeline',
value: '0.01'
},
{
id: '43',
name: 'Social Media > Tag a Friend',
value: '0.01'
},
{
id: '44',
name: 'Social Media > Connect Social Media Account',
value: '0.01'
},
{
id: '45',
name: 'Writing > Write a unique comment per 10 words',
value: '0.01'
},
{
id: '46',
name: 'Writing > Write something per 100 words',
value: '0.01'
}
],
selects: [{
id: '0'
}],
}
},
created() {
if (this.$route.params.id) {
axios.get(`/api/advertiser/task/${this.$route.params.id}`).then(res => {
const actionsData = JSON.parse(res.data.actions);
this.selects = actionsData.map(action => ({
id: action.id,
name: action.name,
value: action.value
}));
})
}
},
methods: {
addselect() {
//this.selects.push({id: 0})
const newSelectId = '0';
const correspondingOption = this.options.find(option => option.id === newSelectId);
if (correspondingOption) {
this.selects.push({
id: newSelectId,
name: correspondingOption.name,
value: correspondingOption.value,
});
console.log('corresponding', correspondingOption)
}
},
changeOption(selectId, newOptionId) {
// console.log('Change Option: selectId', selectId, 'newOptionId', newOptionId);
const selectIndex = this.selects.findIndex((select) => select.id === selectId);
//console.log('Selectedindex', selectIndex)
setTimeout(() => {
const selectedOption = this.options.find((option) => option.id === newOptionId);
console.log(selectedOption)
if (selectedOption) { //&& selectIndex !== -1
const updatedSelect = {
id: selectId,
name: selectedOption.name,
value: selectedOption.value,
};
//this.selects.push(updatedSelect)
console.log('Updated', updatedSelect)
// Update both arrays
this.selects[selectIndex] = updatedSelect;
console.log('blb', this.selects)
const actionIndex = this.selectedActions.findIndex((action) => action.id === selectId);
if (actionIndex !== -1) {
this.selectedActions[actionIndex] = updatedSelect;
} else {
this.selectedActions.push(updatedSelect);
}
//this.selects = [...this.selects];
//this.selectedActions = [...this.selectedActions];
}
console.log('Action changed', this.selects);
}, 0);
},
remove(index) {
this.selects.splice(index, 1);
this.selectedActions.splice(index, 1);
},
edittask() {
const formData = new FormData();
const formattedSelects = this.selects.map((select) => ({
//id: select.id,
name: select.name,
value: select.value,
}));
//const actionsToSubmit = this.selectedActions.length > 0 ? this.selectedActions : this.selects;
formData.append('actions', JSON.stringify(formattedSelects));
const config = {
headers: {
'content-type': 'multipart/form-data'
}
}
axios.post('/api/advertiser/update/task/' + this.$route.params.id, formData, config).then(res => {
console.log(res.data)
//Show success toast.
})
.catch(function(error) {
console.log(error)
});
},
onFileChange(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
this.file = file;
this.preview = reader.result;
};
reader.readAsDataURL(file);
}
}
},
computed: {
totalprice() {
return this.selects.reduce((sum, select) => {
const selectedOption = this.options.find(option => option.id === select.id)
return sum + (selectedOption ? parseFloat(selectedOption.value) : 0);
}, 0).toFixed(2);
},
},
}
</script>
您的问题不太清楚，但我假设您指的是向其推送新项目的
addselect如果是这样，您只需从
this.selectsclonedthis.selectse.i.
methods: {
.
.
.
addselect() {
//grab the last select object
const lastSelected = this.selects[this.selects.length - 1]
// dont push the lastSelected directly in the array or your select.id model will be messed-up
// instead, clone it or manually assign key:value pair
// just using `parse` and `stringify` to clone lastSelected,
this.selects.push( JSON.parse(JSON.stringify(lastSelected) ) )
},
.
.
.
}