I am trying to built a simple select box and post the picked item later.
In my blade file I have following but the output is wrong.
<div class="input-field col s12 blue-text text-lighten-3">
<select name="publish_status" v-model="publishStatus">
<option value="0">Not publish</option>
<option value="1">Yes publish</option>
</select>
<label>Publish status</label>
<span>Selected: #{{ publishStatus }}</span>
</div>
This is the output of my span tag inside my browser view not the console
Selected: {{ publishStatus }}
My vue instance:
new Vue({
el: '#snippet-form',
data: {
publishStatus: '',
});
where is the element id#snippet-form? I have just created a working fiddle based on your code here: https://jsfiddle.net/farazshuja/oguLapf7/1/
html:
<div id="snippet-form" class="input-field col s12 blue-text text-lighten-3">
...
</div>
Related
So I have the following code in vue.js:
<div v-for="guest in guests" :key="guest">
<label for="attendance">Will {{guest}} be attending? </label>
<select v-model="attendance">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br><br>
</div>
Current Output
I want to know what each guest selects and send it to my backend. Guest is an array that gets sent from the previous page. Here is it's code:
created() {
this.guests = this.$route.query.guests;
this.numGuests = this.guests.length;
},
Currently I am just sending each guest by sending this.guest but I am hoping to bind this somehow.
I have no idea how to do this and I do not know if I am searching for the right thing either. Hopefully someone can help me.
you could save it like an object like this
new Vue({
el: '#app',
data: {
guests: [
'steve', 'mark', 'mario'
],
attendance: {}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div v-for="guest in guests" :key="guest">
<label for="attendance">Will {{guest}} be attending? </label>
<select v-model="attendance[guest]">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br>
</div>
<h2>Attendace: {{ attendance }}</h2>
</div>
This is step 1 which will appear & user will select one category from this
<div class="w-100 text-center step-div py-5">
<h3>step 1 </h3>
<p class="step-p"> for Men, Women or Unisex</p>
<div class="container">
<div id="categorytype" class="responsive">
<div v-for="(type,typeIndex) in types" class="filter-slider-div col-4 p-5" #click= "addfiltertype(typeIndex,type.typeslug)">
<img :src="type.typeImage" class="filter-img mx-auto">
<p>{{type.typename}}</p>
</div>
</div>
</div>
</div>
Out put will be something like Men,Women,Both,Kids etc & On click It is saving slug of this type. which I'll share below,
<h3>step 2 </h3>
<p class="step-p">Select your case size</p>
<div class="container">
<div id="categorydials" class="responsive">
<div v-for="(dial,dialIndex) in dials" class="filter-slider-div col-4 p-5" #click= "addfilterdial(dialIndex,dial.dialname)">
<img :src="dial.dialimage" class="filter-img mx-auto">
<p>{{dial.dialname}}mm</p>
</div>
</div>
</div>
In step 2 User will select Size it can be anything,
<h3>step 3 </h3>
<p class="step-p">Select your case colour</p>
<div class="container">
<div id="categorycolors" class="responsive">
<div v-for="(color,colorIndex) in colors" class="filter-slider-div p-5" #click= "addfiltercolor(colorIndex,color.colorslug)">
<img :src="color.colorimage" class="filter-img mx-auto">
<p>{{color.colorname}}</p>
</div>
</div>
</div>
In Step 3 User will select Colour
Now After this I am updating & saving the slug of these categoies in my js in method
Here is code how my Categories are coming from & saving the category slug in typeslugFilter
I used alert Js to check if it's working & saving correctly or not & It's Saving the exact slug,
var filters = new Vue ({
el: '#categorytype',
data:{
types: [
{
typeId: 1,
typename: 'Men',
typeImage: 'assets/images/filter1.png',
typeslug: 'men',
},
{
typeId: 2,
typename: 'Women',
typeImage: 'assets/images/filter2.png',
typeslug: 'women',
},
{
typeId: 3,
typename: 'Watches',
typeImage: 'assets/images/filter3.png',
typeslug: 'both',
}
] },
methods: {
addfiltertype (typeIndex,typeslug) {
this.typeslugFilter = typeslug;
// alert(this.typeslugFilter+ '+' + typeslug);
}
}
});
Consider similar code for other two categories with variable dialnameFilter & colorslugFilter,
Now I am trieng to fetch filtered products using below code it's not working for me as of now
I am getting my products from json file & they are working fine I am using typeslug & dialname as category type in single product details & using productslider as el: element .
<div id="productslider" class="container py-5">
<p>{{typeslugFilter}}</p>
<div v-for="(variant,variantIndex) in variants" v-if="typeslugFilter === typeslug && dialnameFilter === dialname">
<div class="watch-slider-div">
<img :src="variant.variantImage" class="w-100 py-3">
</div>
</div>
</div>
Please help me out in this If any tech geek an help will be appreciated
I am trying to create selected dropdown with vue JS
The code following :
<select v-model="selected"> IDR
<option value="IDR"><strong>Mata Uang</strong> </option>
<option>Rp Indonesia Rupiah</option>
<option>US$ U.S.Dolar</option>
</select>
So the question is how do i give name select tag? i try to add "IDR" but still can't show the "IDR" text
How to solve this or any suggestion about this?
The below code helps to get name and value:
var app = new Vue({
el: '#app',
data (){
return {
selected:null
}
},
methods:{
onChange(e){
console.log("name:" + document.getElementsByTagName("select")
[0].getAttribute("name") + " value:" + e.target.value )
}
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<select #change="onChange" v-model="selected" name="IDR">
<option value="IDR"><strong>Mata Uang</strong> </option>
<option>Rp Indonesia Rupiah</option>
<option>US$ U.S.Dolar</option>
</select>
</div>
I'm not 100% sure, wether i understand the question correct. You can add some name or ref attribute to the select either via HTML or the vue api for ref.
<select v-model="selected" name="IDR" ref="IDR">
<!-- Options -->
</select>
However, if you want to display a default option to the user then have a look at this answer.
Maybe I'm going about this the wrong way ... but I'm trying to use a v-for loop to duplicate/remove a custom component x times. x is decided by a <select> field above. What I have works on the initial page load, but then when you select a different option, only one custom component is displayed (although x is updated). Does anyone have any idea what I am doing wrong?
// here is the select field that defines the number of enrolling students
<select name="number_students_enrolling" v-model="formFields.numberStudentsEnrolling">
<option value="" default selected></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
// here is the custom component I'm trying to duplicate/remove dynamically
<div class="students-container">
<student v-for="n in formFields.numberStudentsEnrolling" :key="n" v-bind:index="n" >
</student>
</div>
// here is the custom component
Vue.component('student', {
props: ["index"],
template: `
<div class="input--student">
<div class="input--half">
<label>
<span class="d-block">
Student {{ index }} Name <span class="field--required">*</span>
</span>
<input type="text">
</label>
</div>
<div class="input-wrap input--half">
<label>
<span class="d-block">
Student {{ index }} DOB <span class="field--required">*</span>
</span>
<input type="text">
</label>
</div>
</div>
`
})
// Here is the Vue.js instance
var test = new Vue({
el: '#test',
data: {
formFields: {
numberStudentsEnrolling: 3
}
}
});
v-for needs a Number, but you're giving it a string (the selected value). Convert it to a Number so v-for will treat it as a range from 1 to N:
<div class="students-container">
<student
v-for="n in Number(formFields.numberStudentsEnrolling)"
:key="n"
v-bind:index="n">
</student>
</div>
For completeness, another approach (per #HusamIbrahim) is to annotate the v-model reference with .number, which will automatically do the conversion.
<select
name="number_students_enrolling"
v-model.number="formFields.numberStudentsEnrolling"
>
Here's a codesandbox: https://codesandbox.io/s/xzy6or9qo
I had select option repeater.
What I want is that when I selected johndoe at the first option, it will no longer display on the second select option.
here's my html
<div id="app">
<h1>Vue JS Multiple Fields Repeater</h1>
<div class="col-sm-6">
<div class="panel panel-default relative has-absolute" v-for="(field, index) in users.usersRepeater">
<button #click="addUsersField" type="button">
Add
</button>
<button #click="deleteUsersField(index)" v-if="field != 0" type="button">
Delete
</button>
<div class="panel-body has-absolute">
<div class="form-group">
<label for="users" class="control-label col-sm-3 text-left">Users {{field}}</label>
<select :name="'users'+index"
class="form-control"
id="users">
<option value="" hidden>Select User</option>
<option value="1">John Doe</option>
<option value="2">Mark Doe</option>
<option value="3">Mae Doe</option>
<option value="4">John Smith</option>
<option value="5">Mae Smith</option>
</select>
</div>
</div>
</div>
</div>
</div>
here's my vue.js
new Vue({
el: '#app',
data: {
users: {
usersRepeater: [{ user: '' }]
}
},
methods: {
addUsersField: function() {
this.users.usersRepeater.push({
user: ''
});
},
deleteUsersField: function(index) {
this.users.usersRepeater.splice(index, 1);
},
}
});
here's the fiddle -> https://jsfiddle.net/0e3csn5y/23/
Ok I have this working now. I liked the question because making an ordered selection is a generic case. But, for me anyway, it wasn't straightforward. The breakthrough was realising that, when you number the choices, the whole state of the component could be encapsulated in one array, allUsers. Available users and choices then become computed properties, based on this array. Moral of the story: get your store right, with no interactions between elements of the store.
My answer weighs in at 130 lines. How long and hard would this be without Vue? Mind boggles.
Stack wants me to post some code, so here's the computed property that generates an array of choices made, in order of their priority, from the all users array...
choices(){
return this.store.allUsers.map((aUser,index)=>{
if(aUser.selection != null)
return {idxAllUsers : index, selection: aUser.selection};
else
return null;
})
.filter(aSelection=>aSelection != null)
.sort((a,b)=>{return a.selection - b.selection})
.map(a=>a.idxAllUsers);
},
I found this one very helpful.