In this sample:
<template>
<div>
<p
v-for="prop in receivedPropsLocal"
:key="prop.id"
>
{{prop}}
</p>
</div>
</template>
<script>
export default {
name: "PropsReceiver",
props: {
receivedProps: {
required: true,
type: Array,
default() {
return [];
},
},
},
data() {
return {
receivedPropsLocal: Array,
};
},
methods: {
},
watch: {
receivedProps: {
deep: true,
handler(val) {
let tmp = Object.entries(Object.assign({}, val));
this.receivedPropsLocal = tmp;
},
},
},
computed: {
getReceivedPropsLocal: {
get() {
if (!this.receivedPropsLocal) {
let tmp = Object.entries(Object.assign({}, this.receivedProps));
this.receivedPropsLocal = tmp;
return this.receivedPropsLocal;
}
return this.receivedPropsLocal;
},
set(value) {
this.receivedPropsLocal = value;
},
},
},
};
</script>
what's the scope of tmp? Is it handled similarly to other entries in data() or not? or it doesn't matter.
I believe tmpis only accessible from inside the handler function since you used let to declare it.
You should declare it directly in the data object to use it anywhere in the component.
Related
I am trying to setup a button that changes a data value in Vue but also have it set using localStorage initally. This way I can have it keep the previous state it was in before a page refresh. Below is the code I'm using and I'm able to get it to work but know that it would be preferable to use the computed section but haven't been able to get that to work properly.
Would anyone know what is going wrong?
My button is triggered using the testing method and the variable in question is isGrid.
export default {
data() {
return {
option: 'default',
}
},
components: {
FileUploader,
},
mixins: [
visibilitiesMixin,
settingsMixin
],
props: {
vehicleId: {
type: Number,
required: true,
default: null,
}
},
computed: {
...mapState([
'isLoading',
'images',
'fallbackImageChecks',
'selectedImages'
]),
isGrid: {
get() {
return localStorage.getItem('isGrid');
},
},
imagesVModel: {
get() {
return this.images;
},
set(images) {
this.setImages(images);
}
},
selectedImagesVModel: {
get() {
return this.selectedImages;
},
set(images) {
this.setSelectedImages(images);
}
},
removeBgEnabled() {
return this.setting('nexus_integration_removebg_enabled') === 'enabled';
},
},
mounted() {
this.loadImages(this.vehicleId);
},
methods: {
testing() {
if (this.isGrid === 'false' || this.isGrid === false) {
localStorage.setItem('isGrid', true);
this.isGrid = true;
console.log(this.isGrid);
console.log(localStorage.getItem('isGrid'));
} else {
localStorage.setItem('isGrid', false);
this.isGrid = false;
console.log('b');
console.log(this.isGrid);
console.log(localStorage.getItem('isGrid'));
}
},
}
I suggest you use vuex with vuex-persistedstate.
https://www.npmjs.com/package/vuex-persistedstate
I have a NUXT project, and some data I have will sometimes not exists.
However, the computed properties is getting quite long, and I feel it isn't the best practice some reason. Is there a way to shorten this, or somehow make the computed properties dynamic by passing in arguments without breaking the site if it doesn't exists?
export default {
props: {
halfWidth: {
type: Boolean,
default: false
},
slice: {
type: Object,
default: () => {}
}
},
computed: {
title() {
return this.slice?.data?.shopifyproduct?.title
},
price() {
return this.slice?.data?.shopifyproduct?.variants[0]?.price
},
image() {
return this.slice?.data?.shopifyproduct?.image?.src
},
alt() {
return this.slice?.data?.shopifyproduct?.image?.alt
},
desc() {
return this.slice?.data?.short_description[0]?.text
},
handle() {
return this.slice?.data?.shopifyproduct?.handle
}
}
}
</script>
Since most of your computed propeerties depend on shopifyProduct, you ccan create a meethod to return that
export default {
props: {
halfWidth: {
type: Boolean,
default: false
},
slice: {
type: Object,
default: () => {}
}
},
methods {
getData() {
return this.slice?.data;
},
getShopifyProduct() {
return this.getData()?.shopifyproduct;
},
},
computed: {
title() {
return this.getShopifyProduct()?.title
},
price() {
return this.getShopifyProduct()?.variants[0]?.price
},
image() {
return this.getShopifyProduct()?.image?.src
},
alt() {
return this.getShopifyProduct()?.image?.alt
},
desc() {
return this.getData()?.short_description[0]?.text
},
handle() {
return this.getShopifyProduct()?.handle
}
}
}
</script>
try to use lodash/get https://lodash.com/docs/4.17.15#get
import _get from 'lodash/get'
computed: {
title() {
return _get(this.slice, 'data.shopifyproduct.title')
},
title() {
return _get(this.slice, 'data.shopifyproduct.variants.0.price')
},
}
OR
methods: {
getShopifyproduct(key) {
return _get(this.slice.shopifyproduct, key)
}
}
function call
getShopifyproduct('variants.0.price')
I'm trying to access my data property in my Vue.js component. Looks like I'm missing something obvious.
Here is a short version of my code. StoreFilter.vue is a wrapper for matfish2/vue-tables-2.
<template>
<store-filter :selected.sync="storeIds"></store-filter>
</template>
<script>
import StoreFilter from './Filters/StoreFilter';
export default {
components: {
StoreFilter
},
data() {
return {
options : {
requestFunction(data) {
console.log(this.storeIds); //undefined
return axios.get('/api/orders', {
params: data
}).catch(function (e) {
this.dispatch('error', e);
}.bind(this));
},
},
storeIds: [],
}
},
watch : {
storeIds(storeIds) {
this.refreshTable();
}
},
methods : {
refreshTable() {
this.$refs.table.refresh();
}
}
}
</script>
How to get storeIds from requestFunction?
Use a closure, see rewrite below.
data() {
let dataHolder = {};
dataHolder.storeIds = [];
dataHolder.options = {
requestFunction(data) {
// closure
console.log(dataHolder.storeIds); // not undefined
return axios.get('/api/orders', {
params: data
}).catch(function (e) {
this.dispatch('error', e);
}.bind(this));
}
}
return dataHolder;
}
I recommend using the created() way to handle this.
export default {
// whatever you got here
data () {
return {
options: {}
}
},
created () {
axios.get('/api/orders', { some: params }).then(response => this.options = response.data)
}
}
Let's say I have a component which repeats with a v-for loop like so:
<hotel v-for="(hotel, index) in hotels"></hotel>
And my hotels array would look like so:
[
{
name: false
},
{
name: false
},
{
name: true
},
{
name: true
}
]
How could I perform an action when my v-for loop encounters the property name set to true only on the very first time it encounters this truthy property?
I know I could probably cache a property somewhere and only run something once and not run again if it has been set but this does not feel efficient.
Use a computed to make a copy of hotels where the first one has an isFirst property.
computed: {
hotelsWithFirstMarked() {
var result = this.hotels.slice();
var first = result.find(x => x.name);
if (first) {
first.isFirst = true;
}
return result;
}
}
Just use computed source
HTML
<div v-for="(hotel, index) in renderHotels"></div>
JS
export default {
name: 'message',
data () {
return{
hotels:[
{
name: false
},
{
name: false
},
{
name: true
},
{
name: true
}
] ,
wasFirst : false
}
},
methods:{
},
computed:{
renderHotels(){
return this.hotels.map((hotel)=>{
if(hotel.name && !this.wasFirst){
this.wasFirst = true;
alert('First True');
console.log(hotel);
}
})
}
}
}
Best way is to use filter function.
data() {
return {
firstTime: false,
};
},
filters: {
myFunc: function (hotel) {
if (hotel.name && !this.firstTime) {
//perform some action
this.firstTime = true;
}
}
}
<hotel v-for="(hotel, index) in hotels | myFunc"></hotel>
I am trying to dynamically add components to my vue template. Things have not gone as expected.
I have this component:
Vue.component('form-x-text', {
delimiters: ["[[", "]]"],
template: `
<div v-if="_.indexOf(['text','email','tel','number','url','color'], fType) > 0" class="form-group" :class="{'has-error': errors.has(fName)}">
<label :for="fId">[[fLabel]]</label>
<input v-validate="{ rules: parsedRule }" class="form-control" :type="fType" :name="fName" :id="fId" data-vv-delay="700">
<span class="field-error" v-show="errors.has(fName)"> [[ errors.first(fName) ]]</span>
</div>
`,
props: {
fType: {
type: String,
validation: function(value){
return _.indexOf(['text','email','tel','number','url','color'], value) > 0
},
required: true
},
fName: {
type: String,
required: true
},
fId: null,
fLabel: null,
fRule: null
},
computed: {
parsedRule: function(){
console.log(this.fRule);
return JSON.parse(this.fRule);
}
}
})
class FormX{
constructor(){
}
static newForm(){
return JSON.parse(`
{
"node": "root",
"child": []
}
`)
}
static textInput(ftype, name, label, id, required = false){
let emailR = false;
if (ftype == 'email'){
emailR = true;
}
return JSON.parse(
`
{
"node": "element",
"tag": "form-x-text",
"attr": {
"f-type": "${ftype}",
"f-name": "${name}",
"f-label": "${label}",
"f-id": "${id}"
}
}
`
)
}
}
var builder = new Vue({
el: '#builder',
delimiters: ["[[", "]]"],
data: {
blankTemplate: {
node: 'root',
child: [
{
node: 'element',
tag: 'div',
attr: { id: '1', class: 'foo'},
child: []
},
workingTemplate: {
content: {}
},
primaryButton: {},
secondaryButton: {},
bForm: null,
},
methods: {
openFormDesigner: function(){
$('#formDesignerModal').modal('show');
this.primaryButton = {'show':false, 'text':'Save', 'spanstyle':'fa fa-floppy-o'};
this.secondaryButton = {'show':true, 'text': 'Close'};
},
addToFormCanvas: function(ftype){
if (!ftype){
console.log("You need to provide the type of the Form element");
}else if (ftype == 'email'){
this.bForm.child.push(FormX.textInput('email', 'mail1','mail1','mail1'));
}else if (ftype == 'text'){
this.bForm.child.push(FormX.textInput('text', 'mail1','mail1','mail1'));
}else if (ftype == 'number'){
this.bForm.child.push(FormX.textInput('number', 'mail1','mail1','mail1'));
}
},
jsonToHtml: function(jsono){
return json2html(jsono);
},
getAttr: function(aobj){
return aobj
}
},
mounted: function(){
$('#vwr-panel > iframe').contents().find('body').css({"margin":"0 auto", "background-color":"#fff"}).html(
json2html(this.blankTemplate));
},
created: function(){
this.bForm = FormX.newForm();
},
computed: {
bFormHtml: function(){
return json2html(this.bForm)
}
},
filters: {
capitalize: function(v){
return _.toUpper(v);
}
}
})
When a click happens, I basically append to a data object in my vue instance.
I then use json2html to convert this data object to "html" which is really a component.
I expect that the component will be rendered, but although I can see it in inspector, it doesn't render.
I am inserting the component with <div v-html="bFormHtml"></div>
Have you tried using a mutable <component> tag?
html:
...
<component :is="componentId"></component>
...
javascript:
...
data: {
componentId: 'blank'
},
components: {
'blank': {
'template': '<div></div>'
}
},
methods: {
'updateComponent': function() {
this.componentId = 'form-x-text'
}
}
...
JsFiddle an Example of multiple components.
I'm not sure if it will work exactly with what you have but it might do better than trying to inject the HTML.