I want to toggle whether a card is rendered in my vue app.
I am using v-if on v-card
Code:
myString == "MONEY
<v-card v-if="`${myString.slice(4,5)}` == "EY".
I get the error that .slice is not a function...I know it works for
`${myString.length}`== 5
Slice is zero based so you may want to try.
myString.slice(3,5)
or
myString.slice(3)
Related
I have a component that uses multiple Vuetify v-file-input components
<v-file-input
:accept="allowedFileTypes"
label="Choose Attachment"
:loading="attachmentBeingProcessed"
name="file0"
id="file0"
:error='fileSizeError[0]'
outlined
dense
#change="fileSelectedForUpload(0)"
#click:clear="removeAttachment(0)"
></v-file-input>
I want to show a particular v-file-input in error mode through code. However, when I set this.fileSizeError[0] = true, it does not put the component in error mode. However, if I use a variable (not array), as show below, it works
<v-file-input
:accept="allowedFileTypes"
label="Choose Attachment"
:loading="attachmentBeingProcessed"
name="file1" id="file1"
:error='fileSizeError1'
:error-messages = "fileSizeErrorMsg1"
outlined
dense
#change="fileSelectedForUpload(1)"
#click:clear="removeAttachment(1)"
></v-file-input>
Is there a reason that I cannot use an array element with ":error"?
Thanks.
There is nothing wrong with assigning an array value to a prop, the problem is changing an array index value is not reactive in Vue 2. As the docs explain, to get around this issue you can update your array[0] value to true using $set:
this.$set(this.fileSizeError, 0, true);
I have an HTML element like below
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
initial value of showOriginalContent is false
and from mounted method am calling an another method where i will make the value of showOriginalContent to true based on some conditions . Currently even if the showOriginalContent is true i can see that v-else is getting displayed for a fraction of seconds before v-if is rendered in the DOM . How can i solve this issue ? I tried to move the function call to all other life cycle methods but nothing is working . I have gone through before and after navigation approach in vue js ,Is it possible to apply that logic here?
I think it's normal if I understood correctly what you posed as the problem.
Because the mounted state is called when the view has already been OK and displayed and only once.
So a variable declaring in this method its change will not necessarily have an effect on what should be displayed.
Try to see the lifecycle in Vuejs for more detail.
Put it in computed or watch methods to see.
Use an outer div and control this div with another variable that will be true when you are done with your condition parts in mounted hook.. like this..
<div v-if="conditioncheckdone">
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
</div>
It will resolve your issue of displaying v-else stuff while you are checking your conditions in mounted
turn the default showOriginalContent value to null instead of false
I would like a clearable v-text-field with a label to show a computed string property based on other another property (a boolean in this simplified example).
Initially it works, the correct default string value is shown.
If I invert the boolean with a button from outside the v-text-field component, the next correct string value is shown as expected.
But if I use the clear button in the v-text-field to invert the boolean, the v-text-field clears and uses the label in the input field when focus is lost, and therefore not using the expected string value.
Input:
<v-text-field :value="text" label="Just a label" clearable #click:clear="booleanModel = true;"></v-text-field>
Computed property:
text: function() {
if(this.booleanModel) {
return 'Its on'
} else {
return 'Default text';
}
}
As far as I can see via vue dev tools, the state in the v-text-field is the same either way.
How come, and how to avoid this?
Please refer to this example: https://codepen.io/fasterlars/pen/RwKrzXZ?editors=1010
To be honest your use-case seems very strange but...
The problem is that v-text-box has some internal state (according to source code comments to make it work without the model) and on clear icon click it sets it to null but it does this in the nextTick - source. This is little bit strange but they probably has some reasons to do so...
So if you don't want to really clear the content but instead set it to something else, do not use default "clearable" functionality and use append slot instead:
<v-text-field :value="text" label="Just a label">
<template v-slot:append>
<v-icon #click="booleanModel = true">clear</v-icon>
</template>
</v-text-field>
When you click on the clear button, the value of booleanModel does not change.
You need to update the #click:clear = "booleanModel = false;".
Also, add a :key="booleanModel in your text field, which will ensure that whenever the value of booleanModel changes it will re-render the v-text-field component again.
In my app I've got some card elements printed dynamically from an array of data. I wanted these cards to open an action sheet on click, that would display an image url from the same array element.
<f7-button class="img-trigger" #click="$refs.actionsOneGroup.open()">
<f7-card v-for="npc in npcs" :key="npc.npcId" class="boss-card-container">
<f7-card-header class="no-border boss-card subheading no-hairline" valign="bottom" :style="'background-image:url(' + npc.npcImg + ');'">
{{ npc.npcName }}
</f7-card-header>
</f7-card>
</f7-button>
<f7-actions class="img-container" ref="actionsOneGroup">
<f7-actions-group v-for="npc in npcs" :key="npc.npcId">
<img :src="npc.npcImg" class="boss-image">
</f7-actions-group>
</f7-actions>
As you can see here, I iterate through the npc array to print the f7-card elements, and on the cards I show a small preview of the npc.npcImg image. What I would like to do is show that same image inside the action sheet. For now I just iterate through the array again separately, which of course results in all the images printing inside the same element, as expected.
I'm not sure how to link the two together and pass the npc.npcImg down to the action sheet component.
Help is much appreciated.
I don't know about the framework7, but in vue.js you have to use this array item as source to display the image. You can pass it as parameter on the refs.actionsOneGroup.open() function and store it in a variable to use it after. In the example I saved the npc in the selectedNpc variable. Your code will looks like it:
<f7-button class="img-trigger">
<f7-card v-for="npc in npcs" :key="npc.npcId" class="boss-card-container" #click="$refs.actionsOneGroup.open(npc)">
<f7-card-header class="no-border boss-card subheading no-hairline" valign="bottom" :style="'background-image:url(' + npc.npcImg + ');'">
{{ npc.npcName }}
</f7-card-header>
</f7-card>
</f7-button>
<f7-actions class="img-container" ref="actionsOneGroup">
<f7-actions-group v-if="selectedNpc">
<img :src="selectedNpc.npcImg" class="boss-image">
</f7-actions-group>
</f7-actions>
I created a codepen to show you how to do it in vue.js
In safari,
i had a simple edtable div with a input button, on deletion of the element (backspace or delete), caret moves to center of edtiable div with some inline styled p tag with text-align:center and inline style "color"
<div class="editable" contenteditable="true">
<input type="button" value="inputBtn" />
</div>
http://jsfiddle.net/VqCvt/
its a strange behavior observed only in safari.
Over a year after this post, this issue is still a problem. This issue is directly tied to the input tag. Once an input tag has been in a contenteditable element, Safari will attempt to make the style of the text similar to the input (I confirmed this by observing that the resulting style was different for type="text" vs type="button"). It's a very strange bug. I have found a workaround that works, but it's pretty absurd. My fix is basically to test when my main input no longer has content, and then removing the element, and re-adding it
<div id="content-wrapper">
<div contenteditable="true" id="content" role="textbox"></div>
</div>
and in my "keyup" listener, I put the following code
// Grab main editable content div
var element = document.getElementById("content");
// Check empty state conditions. These work for me, but you may have your own conditions.
if (element.getElementsByTagName("input").length == 0 &&
element.innerText.trim().length == 0) {
// Grab parent container
var elementContainer = document.getElementById("content-wrapper");
// Add a copy of your element to the same specifications. If you have custom style attributes that you set through javascript, don't forget to copy them over
elementContainer.innerHTML = '<div contenteditable="true" id="content" role="textbox"></div>';
// Re-focus the element so the user doesn't have to click again to keep typing
element = document.getElementById("content");
element.focus();
}
What this code does works for my case because input is the only elements which are allowed in my code other than text nodes and <br>, so I first check to make sure there are no input elements, and then make sure the innerText is empty (this indicates no content in my case, you may have to customize your conditions for the "empty" state). Once the empty state is confirmed, I replace the old div with a new one to the same specification, and the user never notices. A very strange issue with a hacky workaround, but I think contenteditables.
You could probably also strip out the HTML that Safari is generating, but for my case this solution is much simpler. I hope this helps someone in the future.