i have a object name question.which is coming from database.i have used v-for with my question object for creating input field.and filing the field the with the question. but i have also a answer field below of question field.i want to use v-model on that answer field. as example i have five question there is five answer field.if i have four question i have four answer field. i don't know for sure how many question field will be there as it is not certain.i want to use v-model with the answer field.as example if there is five answer field i want to create five object of answer filed. how should i do it?
<template>
<div v-for="(creative_s,index) in question_s_s.creative_s_s" v-if="question_s_s.type=='Creative'">
<v-textarea
disabled
filled
label="Story"
rounded
v-model="creative_s.story"
></v-textarea>
<v-textarea
label="Answer for Question no 1"
outlined
rounded
v-model=""
></v-textarea>
</div>
</template>
<script>
export default {
data: () => ({
creative: {},
}),
}
</script>
question_s_s is coming by ajax request from database.inside question_s_s i have creative_s_s object there is no problem. i want to use v-model on the answer part.
Related
I have a b-table which looks something like this:
<b-table :fields="fields" :items="tableRows">
<template #head(expand_all+)="data">
//would like to make this a button to expand all row-details
<div class="text-right">{{data.label}}</div>
</template>
...
<template #cell(expand_all+)="data">
<div class="expand-arrow-container":class="{ 'expanded': data.detailsShowing }" #click="data.toggleDetails">
<font-awesome-icon icon="chevron-right" />
</div>
</template>
...
<template #row-details="row">
//display data here
</template>
</b-table>
Now, all of this works fine and and my row details expand/contract as I would expect (see b-table row-details for more information).
The problem arises in that I want to be able to click one button and expand/contract all the row-details. My plan is to change template #head(expand_all+)="data" into a button which can be clicked to accomplish this. However, I do not know how to do this. I have searched and read the b-table documentation and have not found any way of accomplishing what I want. I've even taken a look at the table object to see if it had any references to its rows and I didn't see anything.
Do any of you know a way to accomplish this? Getting a reference to the rows would make this a simple problem, but as I mentioned I didn't see anything. I am also not looking to swap out the b-table with a bunch of b-collapse elements since I have put a lot of work into the table.
As described on the docs, you can set a _showDetails property on your items passed to the table. Which if set to true will expand that row's details. This means you could loop through all your items and set that property to true to expand all rows. And do the same with false to collapse them.
If the record has its _showDetails property set to true, and a row-details scoped slot exists, a new row will be shown just below the item, with the rendered contents of the row-details scoped slot.
Here's two example methods you could use.
We're using $set because we're adding a new property to an already existing object. You can read more about why here
expandAll() {
for(const item of this.tableRows) {
this.$set(item, '_showDetails', true)
}
},
collapseAll() {
for(const item of this.tableRows) {
this.$set(item, '_showDetails', false)
}
}
I'm have a project in vuejs, Vuetify and the following library to generate forms dynamically using annotated JSON Schemas:
https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/about
The library is great and do exactly what I need, generate form from JSON scheme, I can even add my own component, and show it on a form, the only missing thing is I cant get the slot component data into the model.
you can find my example here:
https://codepen.io/eran-levi/pen/jOqjroa
This is how I added the component:
<template slot="rating" slot-scope="{key, value, update, schema }" class="field">
<star-rating :value="value" #rating-selected="update($event, key)" :show-rating="false" />
</template>
and in the Schema JSON:
rating: {
type: "number",
title: "Rating",
minimum: 0,
maximum: 5
}
as you can see, once you hit the "Show Data" button, you can see the results of each field you edit, beside the value of the new star component I have added..
what am I missing here?
Thank you.
You are missing your update method.
I added the updateRating method and bound it to the #rating-selected event.
Here is a working fiddle: https://jsfiddle.net/9pjdxht6/1/
vue-star-rating component:
<star-rating :value="value" #rating-selected="updateRating" :show-rating="false" />
updateRating method:
updateRating: function(rating){
this.model.rating = rating;
}
Hope it help you.
This question already has answers here:
Vue converts input[type=number] to a string value
(2 answers)
Closed 2 years ago.
I use mapState from 'vuex'. My state object init has several properties, among them 'init.min' (which is the number). When I bind it with v-model in input type="text" it also remains a number. But when the user makes any change in form input init.min data converted to string. I tried to change <input type="number"/> but it doesn't work. Why is the number that comes from mapState and is attached to the form input with v-model, when changed, it is converted to a string and spoils my validation. Vuelidate expects a number and there is a string.
computed:{
...mapState({
init: 'init'
})
},
in component template
<input v-model="init.min" type="text"/>
Have you tried using v-model.number? https://v2.vuejs.org/v2/guide/forms.html#number
<input v-model.number="init.min" type="number" />
Copy from the docs:
If you want user input to be automatically typecast as a Number, you can add the number modifier to your v-model managed inputs:
<input v-model.number="age" type="number">
This is often useful, because even with type="number", the value of HTML input elements always returns a string. If the value cannot be parsed with parseFloat(), then the original value is returned.
This question already has answers here:
How to limit iteration of elements in `v-for`
(7 answers)
Closed 2 years ago.
Simple problem, i have a members list where i iterate through it with a v-for.
How can i limit the results and only show the first 2 ?
members = [ {id : 1, name: 'Franck'}, {id : 2, name: 'Sophie'}, {id : 3, name: 'Bob'}]
<div v-for="member in members" :key="member.id">
<p>{{ name }}</p>
</div>
Just want to know if it's feasible from template ? Otherwise i know that i can use a computed properties that filtered it and i just have to loop through the results of my filtered array
You can use slice() in the template if you prefer to not use a computed property. I would though choose to have a computed property, if for nothing else, I like to handle all logic in script instead of template. But as said, you can use slice:
v-for="(member, index) in members.slice(0, 2)"
A forked fiddle that was provided by #Raffobaffo in a comment.
After some discussions here, lets divide the answer in two:
A fast, not super correct way but still referred inside vue docs
Use a v-if and set and index in the v-for.
<div v-for="(member, index) in members" :key="member.id" v-if="index < 3">
<p>{{ name }}</p>
</div>
else, the most correct way is to create a computed property returning just the elements you need:
<template>
<div v-for="member in justTwoElements" :key="member.id">
<p>{{ name }}</p>
</div>
<template>
....
computed: {
justTwoElements: function(){
return this.members.slice(0,2);
}
}
This latest solution is more indicated when your data entry is huge, the benefits of using it instead of the first solution are well explained here.
I hope this helps to give you the correct path to follow
I want to display a list of entries, and I have it working up through retrieving JSON from a server, parsing it, storing it in a Vuex.Store and iterating through it with v-for-"entry in this.$store.state.entries".
When a user first visits the page all entries will be visible. The next step is to filter the entries so that only matching entries remain visible. Since this filtering will be changing a lot, I want to use v-show. I have a separate component that lets users enter search terms, the server is queried, and an array of numbers—matching IDs—is returned. I want to only show entries with IDs that match the numbers in the array, queriedEntries. My template is below:
<template>
<div id="entries">
<div v-for="entry in this.$store.state.entries"
v-html="entry.content"
v-show="this.$store.state.queriedEntries.includes(entry.id)">
</div>
</div>
</template>
I get an error that I don't understand, and searching for answers hasn't yielded anything because it doesn't match the problem others have had.
[Vue warn]: Error in render: "TypeError: this is undefined"
It's the this in the v-show, but every other this works. What's up?
Your problem is occurring because you are referencing this inside your template. This is not necessary.
The first thing I recommend you do is have a read into Vuex' Getters. Further down on the same page, you'll find information about mapGetters. This will help to prevent you from directly targeting/modifying data within your state. Modification of data should be left only to Mutations and Actions.
For example, your code may look like the below:
// in your component script
...
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
allEntries: 'entries', // map state.entries to the name 'allEntries'
queriedEntries, // your other state value. You may want to convert this to a getter
// other state values if necessary
})
}
}
...
// in your component template
<template>
<div id="entries">
<div v-for="entry in allEntries"
v-html="entry.content"
v-show="queriedEntries.includes(entry.id)">
</div>
</div>
</template>
...
Here you can see that we have used mapState which helpfully generates computed getter functions from our data in the store. We can then use the property name we have assigned it to within our template.
I ended up removing this from everything but the v-for, as suggested, and the code worked. Why this causes an error in v-show and v-html is still a mystery.
Final, working code:
<div v-for="(entry, entryindex) in this.$store.state.entries"
v-bind="{id:entryindex}"
v-bind:key="entryindex"
v-show="$store.state.queryMatchedEntries[0] == -1 || $store.state.queryMatchedEntries.indexOf(parseInt(entryindex)) != -1">