How can I bind the following dynamically? It’s for user feedback in case of an error, so I’d like to avoid rendering it unless needed.
I’m using the vuetify boilerplate. This works when inside the template as is:
v-img :src="require('../assets/error.png')"
I’d like to set it dynamically :src=null to :src="errorImg" when receiving an error. The require is throwing me off.
Any help greatly appreciated!
This worked:
if error
this.errorImg = require("../assets/error.png");
Related
Stackoverflowers, I'm a newbie of vue.js, I try to implement a binding effect which can enable the changing of binding created by v-model. To put things clear, I give an example as following:
<codemirror ref="outputCm" v-model="output" :options="cmOutputOptions"></codemirror>
Here we have a codemirror element, it's content is binded with variable output, is it possible in some place after I changed output to some-variable, its content now is binded with some-variable? I tried to use assignment, it didn't work. And I tried my best to google, but I'm still disappointed. If anybody know how to give this a shot, I'm appreciated.
yes you could make it but from your data object
data: {
output: (your logic here)? some-variable : 'some thing else'
}
We like to use dropdown inside the grid, so we using this (https://www.telerik.com/kendo-vue-ui/components/grid/editing/#toc-setting-custom-editors) example in our project we are getting this error:
Uncaught TypeError: $(...).appendTo(...).kendoDropDownList is not a function
at VueComponent.categoryDropDownEditor (git.vue?26ca:154)
Could anyone help me on this?
Answering my own question it may helpful for someone
by adding kendo.all.min.js it working fine :)
But don't know why it wont included in default kendo vue.
<script src="http://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
This code works well. But if I change the code, it doesn't work.
I'd like anyone to help me if they has experience in Vue.js.
It does work, it should be used like this {{colorList[0]}} not {{this.colorList[0]}}since vue template is using the “Mustache” syntax.
I have generated fieldset (textboxes,selectfield etc) inside panel. After login done i display this panel using bellow code from my controller.js
Ext.Viewport.add({xtype: 'IntakePanel'});
Ext.Viewport.setActiveItem({xtype: 'IntakePanel'});
But after this if i try to inspect i can found two panels are there
And due to this if i try to access fields of panel i got array with length 2/4 etc.
I try to remove it using
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
but doesn't help much.
Please help me on this.
Thanks
I think the framework is reinstantiating your component because when you pass only the xtype, it can't know you are trying to reference the same instance as before. try adding an id to your instance and instead of passing an xtype to setActiveItem, give it the result of a component query.
Ext.ComponentQuery.query('#yourCompoId'):
I'm trying to create a dynamic input element that is draggable. Now the problem is I create an element but when I use something like
$("#in"+index.toString()).draggable({cancel:true});
after I append it to the container div, it's not working. Basically it's not working for the dynamically created input element of a certain id. Here's the code and please feel free to point out problems. I could really use some help on this one. Thanks!
http://jsfiddle.net/ithril/hRCun/5/
The problem is that you are creating a new element that is not bound to the UI functions. I would suggest using clone(true,true) and then changing the parameters of the cloned element as need be. You can learn more about clone here. http://api.jquery.com/clone/