I am using Vuetify to load an image:
<v-img :src="this.imageUrl" :lazy-src="defaultImage" v-on:error="onError" :width="100" :height="150"></v-img>
data () {
return {
defaultImage: require('#/assets/images/defaultImage.png'),
useFallbackImage: false
}
},
computed: {
imageUrl: function() {
return !this.useFallbackImage ? `http://foo/v1.0/bar/${this.propId}` : this.defaultImage;
}
},
methods: {
onError: function() {
this.useFallbackImage = true;
}
}
I don't know if the image exists, so I am letting the browser try, and if it doesn't then fallback to the default. This works just fine, but Vuetify annoyingly prints a bunch of junk to the console:
"[Vuetify] Image load failed ... found in ..."
I looked in the source code and it looks like they are indiscriminately printing to the console whenever an error even before the handler. But I thought I would try -- does anybody know of a way to squelch Vuetify here?
Thanks
You maybe able to do something like this:
import VImg from 'vuetify/lib/components/VImg'
export default VImg.extend({
name: 'VImageWrapper',
methods: {
onError() {
// leave empty
}
}
})
Taken from this thread:
https://github.com/vuetifyjs/vuetify/issues/6755
Related
The following code of inertiajs with vue only works this way
computed: {
flash: function () {
if (this.$page.props.flash.message) {
this.$toast.open({
type: this.$page.props.flash.type,
message: this.$page.props.flash.message.message,
})
}
return this.$page.props.flash.message
}
},
watch: {
flash: function (newVal, oldVal) {
}
},
but if i remove the watch part, it doesn't work. Also if i put the toast part inside watch, it doesn't work. Anyone facing same issue? I am working with inertiajs on laravel 8.
Try this
computed: {
flash(){
if (this.$page.props.flash.message) {
this.$toast.open({
type: this.$page.props.flash.type,
message: this.$page.props.flash.message.message,
})
}
return this.$page.props.flash.message
}
},
I am trying to get nuxt-socket-io working on my NuxtJS application, but my emit functions do not seem to trigger the actions in my vuex store.
nuxt.config.js has the following code:
modules: [
'#nuxtjs/axios',
'nuxt-socket-io'
],
io: {
sockets: [
{
name: 'main',
url: process.env.WS_URL || 'http://localhost:3000',
default: true,
vuex: {
mutations: [],
actions: [ "subscribeToMirror" ],
emitBacks: []
},
},
]
},
That subscribeToMirror action is present in my vuex store (in index.js):
export const actions = {
async subscribeToMirror() {
console.log('emit worked');
try {
new TopicMessageQuery()
.setTopicId(state.topicId)
.setStartTime(0) // TODO: last 3 days
.subscribe(HederaClient, res => {
console.log("Got response from mirror...");
return res;
});
} catch (error) {
console.error(error);
}
}
};
And that action should be triggered by the emit in my index.vue script:
mounted() {
this.socket = this.$nuxtSocket({
name: 'main',
reconnection: false
})
},
methods: {
...mapMutations([
'setEnv',
'initHashgraphClient',
'setTopicId',
'createNewTopicId'
]),
...mapActions([
'createAndSetTopicId'
]),
subscribeToMirror() {
console.log("method worked");
return new Promise((res) => {
this.socket.emit('subscribeToMirror', {}, (resp) => {
console.log(resp)
resolve()
})
})
}
}
While I can see the 'method worked' console output from index.vue's subscribeToMirror method, I have never seen the 'emit worked' message. I have played around with this for hours, copying the instructions from this guide but have had no success.
Can anyone spot what I'm doing wrong?
UPDATE: I tried copying the code from this example and was unable to get a response from that heroku page. So it appears that I am completely unable to emit (even though $nuxtSocket appears to be functional and says it's connected). I am able to confirm that the socket itself is up and running, as I was able to get responses from it using the ticks from that example. I'm putting the repo for this project up here for viewing.
UPDATE2: I made a much simpler project here which is also not functioning correctly but should be easier to examine.
It turns out that while nuxt-socket-io functions as a wrapper for socket.io stuff you still need to actually create the server. This is a good template for how to do this
I'm trying to use page objects in Nightwatch js and am creating my own commands in that. For some reason now Nightwatch doesn't seem to recognise standard commands on browser and give me a type error on different commands. What am I doing wrong with my code?
I'm tried different things here already, for example adding 'this' or 'browser' in front of the command, which didn't help. My code has gone through many versions already I am not even sure anymore what all I've tried after Googling the error.
My pageObject:
const homePageCommands = {
deleteAllListItems: function (browser) {
browser
.elements('css selector', '#mytodos img', function (res) {
res.value.forEach(elementObject => {
browser.elementIdClick(elementObject.ELEMENT);
});
})
.api.pause(1000)
return this;
}
};
module.exports = {
url: "http://www.todolistme.net"
},
elements: {
myTodoList: {
selector: '#mytodos'
},
deleteItemButton: {
selector: 'img'
}
},
commands: [homePageCommands]
};
My test:
require('../nightwatch.conf.js');
module.exports = {
'Validate all todo list items can be removed' : function(browser) {
const homePage = browser.page.homePage();
homePage.navigate()
.deleteAllListItems(homePage)
// I have not continued the test yet because of the error
// Should assert that there are no list items left
}
};
Expected behaviour of the custom command is to iterate over the element and click on it.
Actual result:
TypeError: browser.elements is not a function
at Page.deleteAllListItems (/pageObjects/homePage.js:18:14)
at Object.Validate all todo list items can be removed (/specs/addToList.js:8:14)
at processTicksAndRejections (internal/process/next_tick.js:81:5)
And also:
Error while running .navigateTo() protocol action: invalid session id
Looks like you need to pass browser to the deleteAllListItems function instead of homePage on this line:
homePage.navigate()
.deleteAllListItems(homePage)
Having a simple custom command like this (file pressTab.js):
exports.command = function() {
this.keys(this.Keys.TAB);
return this;
};
I am defining a section in a page and try to call this command from the section:
module.exports = {
url: "...",
commands: [{
testCommandInSection: function(){
this.section.testSection.callPressTab();
return this;
}
}],
sections: {
testSection: {
selector: ".mySectionCssSelector",
commands: [{
callPressTab: function() {
this.pressTab();
return this;
}
}]
}
}
}
If I now use
myPage.testCommandInSection();
an error is thrown before starting the nightwatch queue:
Error while running testCommandInSection command: Cannot read property 'toString' of undefined
But this error does not show up, if I add a dummy parameter to the pressTab call:
callPressTab: function() {
this.pressTab("dummy");
return this;
}
and this doesn't happen, if I call this.pressTab() directly from the page, but not from the section. Why is that?
Problem with "this" object :
In custom commands, "this" usually is browser
In pageobject, it depends .
*In your case, your firstthis.section.testSection.callPressTab(); is your page object, and your second one this.pressTab(); is your section object.
If you want to call custom commands with Browser object, you should try "this.api.YourCustomCommand"
testSection: {
selector: ".mySectionCssSelector",
commands: [{
callPressTab: function() {
this.api.pressTab();
return this;
}
}]
}
Looking at the docs you can pass startup data to a widget:
editor.execCommand( 'simplebox', {
startupData: {
align: 'left'
}
} );
However this data is pointless as there seems to be no way to affect the template output - it has already been generated before the widget's init, and also the data isn't even available at that point:
editor.widgets.add('uselesswidget', {
init: function() {
// `this.data` is empty..
// `this.dataReady` is false..
// Modifying `this.template` here does nothing..
// this.template = new CKEDITOR.template('<div>new content</div>');
// Just after init setData is called..
this.on('data', function(e) {
// `e.data` has the data but it's too late to affect the tpl..
});
},
template: '<div>there seems to be no good way of creating the widget based on the data..</div>'
});
Also adding a CKEditor tag throws a "Uncaught TypeError: Cannot read property 'align' of undefined" exception so it seems the data is also not passed to the original template:
template: '<div>Align: {align}</div>'
What is the point of having a CKEDITOR.template.output function which can accept a context, if there's no way of dynamically passing data?
The only horribly hacky solution I've found so far is to intercept the command in a beforeCommandExec and block it, then modify the template and manually execute the command again..
Any ideas to generate dynamic templates based on passed data? Thanks.
Here's how I did it.
Widget definition:
template:
'<div class="myEditable"></div>',
init: function () {
// Wait until widget fires data event
this.on('data', function(e) {
if (this.data.content) {
// Clear previous values and set initial content
this.element.setHtml('')
var newElement = CKEDITOR.dom.element.createFromHtml( this.data.content );
this.element.append(newElement,true);
this.element.setAttribute('id', this.data.id);
}
// Create nestedEditable
this.initEditable('myEditable', {
selector: '.myEditable',
allowedContent: this.data.allowedContent
})
});
}
Dynamic widget creation:
editor.execCommand('myEditable', {startupData: {
id: "1",
content: "some <em>text</em>",
allowedContent: {
'em ul li': true,
}
}});