HTML code:
<img src="images/website/image.svg" alt="" width="150px" height="150px" v-on:click="submitimage($event)">
and want to pass the src url of the image to data passing it through $event to a Vue method.
vue script code:
<script>
export default {
data(){
return {
imgurl: ''
}
},
methods: {
submitimage(event){
var element = event.target;
var id = element.getAttribute('src');
window.console.log(id)
this.imgurl = id
},
},
}
</script>
I also tried:
methods: {
submitimage(event){
this.imgurl = this.event.target.getAttribute('src');
window.console.log(event.target.getAttribute('src'))
},
But it works with window.console.log and shows the correct URL, but if I try it to pass it to data(), its not working.
No error, its just empty or undefined.
What am I missing?
It looks like everything your are doing is correct:
check this stackblitz here: https://stackblitz.com/edit/vue-tu7vzx
So I guess it is really the question how you are trying to access this.imgurl
However, your question does not show enough code to make an educated guess.
Related
i trying auto import all images from folder. Under // tested is what i tried:
<template>
<p>classical art</p>
<img v-for="image in images" :key="image" :src="image.url" :alt="image.alt" />
</template>
<script>
export default {
data: function () {
return {
name: "classical-art",
images: [
{ url: require("../assets/images/classical-art/img-00001.jpg"), alt: "první" },
{ url: require("../assets/images/classical-art/img-00002.jpg"), alt: "druhý" },
],
};
},
};
// tested
const classicalArt = require(`../assets/images/classical-art/.jpg`)
classicalArt.forEach((image) => {
return image;
});
</script>
<style module lang="scss"></style>
Im not good in this things so i will need a help with this. Probably im just stupid, but i cant make it works. If possible, i want it async (lazy) or whatever it is.
----- UPDATE:
I tried something like that, but still nothing, but with require.context i should be able do this probably:
<template>
<p>classical art</p>
<img :src="getImgUrl()" v-bind:alt="req" />
</template>
<script>
export default {
data: function () {
return {
name: "classical-art",
};
},
methods: {
getImgUrl() {
var req = require.context(
"../assets/images/classical-art/",
false,
/\*.jpg$/
);
req.keys().forEach(function (key) {
req(key);
});
},
},
};
</script>
<style module lang="scss"></style>
I want when I add another image to the classical-art folder to create a new tag automatically and display the image without having to edit the code and manually register it
Can anyone help me with this?
For image rendering you must indicate the exact url to every image, so you have to type every url manually in the correct way.
BTW, your idea can be implemented with NodeJS. Node runtime has access to the file system, so url string can be created authomatically for every file.
Vue, unfortunately, has no real access to your files, it means every your component, file or image must be imported manually.
I'm wondering how to display a number in HTML that was created dynamically later on in the code. For instance I initialize the value reportDataLength in data(), and I tested that it was returning the right value by doing a console.log(), but now I want to display this value in HTML?
name: 'notification-tray',
data() {
return {
headers: [
{
text: 'Notifications',
value: 'Body',
width: '380px',
},
],
reportData: [],
reportDataLength: 0,
};
},
async created() {
await this.getReportDataLength();
},
methods: {
async getReportDataLength() {
... this.reportDataLength = this.reportData.length;
console.log(this.reportDataLength);
},
},
};
But obviously when I do something like this,
<span class="d-none">Notification Button</span>
<span class="badge">this.reportDataLength</span>
it doesn't work correctly. The other solutions I saw for similar problems used JQuery, and I feel like there's a simple way to reference this, but I can't seem to find it out.
okay so if you are using pure Javascript , u can use this in your javascript function :
Document.getElementsByClassName('badge').innerHtml=this.reportDataLength ;
otherwise if you are using vue js you can try something like this in your html file :
<span class="badge">{{reportDataLength}}</span>
You can do document.getElementById("ID-HERE").innerHTML = "new stuff", but be warned that setting innerHTML is dangerous.
I'm trying out Treant.js library for making tree structures. I've started with this example: https://github.com/fperucic/treant-js/tree/master/examples/basic-example, and if I manually declare the value for the chart, it works with no issues.
Now I want to load it with data received from a Django channel, but can't seem to find a solution.
This is the tag from html to which the tree chart should be loaded, with .js files loaded after it, as in the example from the link above ('load static' is called in the beginning of the file, and works for all other static files):
<div class="chart" id="basic-example"></div>
<script src="{% static 'path.../raphael.js'%}"></script>
<script src="{% static 'path.../Treant.js'%}"></script>
I tried changing the value of the variable 'content' like this:
content = {}
var chart_config = {
chart: {
container: "#basic-example",
connectors: {
type: 'step'
},
node: {
HTMLclass: 'nodeExample1'
}
},
nodeStructure: content
};
new Treant( chart_config );
someSocket.onmessage = function(e) {
let event_data = JSON.parse(e.data);
content = event_data.data;
};
I've checked if the 'event_data.data' is properly communicated through the channel, and if it's a valid JS object, and that all works. I presume this is quite a newbie question, but I'd appreciate any help :)
I haven't tried to reproduce the issue (sorry for that), but it seems you gotta define your content before calling new Treant().
So, I would try this:
someSocket.onmessage = function(e) {
let event_data = JSON.parse(e.data);
var chart_config = {
chart: {
container: "#basic-example",
connectors: {
type: 'step'
},
node: {
HTMLclass: 'nodeExample1'
}
},
nodeStructure: event_data.data
};
new Treant( chart_config );
};
I've been trying to work this out but sofar have been unable to find an answer. My Polymer element loads a base template JSON file, which is then run through a dom-repeat to create a basic HTML page.
Then another JSON text-file is loaded, which completes the various areas of the HTML with a JS function.
Upon button-click form child, a function is run that triggers the loading of another JSON file that adds additional info. This all works fine.
But when I go out of the page and back in it, it has remembered all my settings but does not display things correctly. It displays the translatedText well and the html code is there, but it does not complete the html code for the originalText.
It seems to want to load the last JSON file before the DOM is properly rendered. So I want it to refresh the whole DOM, but how do I do this?
My MWE:
<template>
<iron-ajax
auto
url="basetext.json"
handle-as="json"
last-response="{{baseText}}"></iron-ajax>
<div class="textcontent">
<template is="dom-repeat" items="{{baseText.lines}}" as="line">
<div class="lineblock">
<div class="line" id="line{{line.lineid}}" inner-h-t-m-l="{{line.linetext}}"></div>
<template is="dom-if" if="[[extraShowEnabled]]">
<div class="linepi" id='linepi{{line.lineid}}' inner-h-t-m-l="{{line.linetext}}"></div>
</template>
</div>
</template>
</div>
<template is="dom-if" if="[[extraLoadEnabled]]">
<iron-ajax
auto
url="originaltext.json"
handle-as="json"
last-response="{{originalText}}"></iron-ajax>
</template>
<iron-ajax
auto
url="translatedtext.json"
handle-as="json"
last-response="{{translatedText}}"></iron-ajax>
</template>
<script>
Polymer({
is: 'text-page',
properties: {
translatedText: Object,
originalText: Object,
extraShowEnabled: {
type: Boolean,
value: false
},
extraLoadEnabled: {
type: Boolean,
value: false
},
showViewer: {
type: String,
value: "none"
}
},
observers: [
'setView(showViewer)',
' _computeSegments(translatedText,".line")',
' _computeSegments(originalText,".linepi")'
],
ready: function() {
this.addEventListener('eventFromChild', this.changeView);
},
changeView: function(event) {
this.showViewer = event.detail.selectedView;
},
setView: function(showViewer) {
\\ first some code here to reset all css.
if (showViewer === "none") {
this.extraShowEnabled = false;
this.extraLoadEnabled = false;
}
if (showViewer === "sidebyside") {
this.extraShowEnabled = true;
this.extraLoadEnabled = true;
this._computeSegments(this.originalText,".linepi");
this._addSideBySideCode();
}
},
_computeSegments: function(inputText,linetype) {
if (inputText) {
Array.from(this.querySelectorAll(linetype+" sc-segment")).forEach(item => item.innerHTML = inputText.segments[item.id]);
}
},
_addSideBySideCode: function() {
\\ this function just adds some css.
},
});
</script>
I think You should try to use a compute function result as a dom-repeat item source, something like this:
<template is="dom-repeat" items="{{itmesByParamsCompute(baseText, originalText, translatedText, extraloadEnabled, ...)}}" as="line">
Add as many params as You need to recompute on. Then that compute function should return a valid source anytime at least one of the paras changes.
Also keep in mind, that if any of these params will become undefined that compute function might be ignored completely. Work around for this is making this opposite way - one property which is modified from manny observers, something like this:
properties: {
items_to_use: {
type: Array,
value: []
},
translatedText: {
type: Object,
observer: 'updateItemsToUse'
},
originalText: {
type: Object,
observer: 'updateItemsToUse'
}
},
updateItemsToUse: function (data) {
let updatedArray = this.someMixFixFunction(this.item_to_use, data);
this.set('items_to_use', updatedArray);
},
someMixFixFunction: function (old_array, data_to_apply) {
// do some merging or what ever You need here, for example
let updatedArray = old_array.concat(data_to_apply);
return updatedArray;
}
If I wanted to display a loading image and I was using JQuery to populate my data, I would do something like this:
HTML
<div id="loadthis"><img src="loading.gif"></div>
JS
$('#loadthis').html("Received Data");
However, with Polymer, my template looks like this:
<div id="loadthis">{{receiveddata}}</div>
and I have this property:
Polymer({
is: 'test-loading',
properties: {
receiveddata: {
type: String,
value: ''
}
}
});
I have tried simply putting html in the value for receiveddata but quickly discovered that won't work. I've also tried moustache syntax of {{#if}} etc, but that didn't work at all.
How can I display an image until the receiveddata property is populated?
Based on #a1626's comment mentioning dom-if I came up with this solution:
<div id="loadthis">
<template is="dom-if" if="{{isloading}}">
<img src="loading.gif">
</template>
<template is="dom-if" if="{{!isloading}}">
{{receiveddata}}
</template>
</div>
Then I added an isloading property in my Polymer definition.
Polymer({
is: 'test-loading',
properties: {
receiveddata: {
type: String,
value: ''
},
isloading: {
type: Boolean,
value: true
}
}
});
Now I just set it to false when the data has loaded.
self.isloading = false;
If you want to load local image dynamically, you should load it with full address.
For example, your loading.gif image is under folder /images/loading.gif or /views/loading/loading.gif. Though you can use it like <img src="loading.gif"> statically, once you want to use it dynamically, you should write this.receiveData = '<img src= "/images/loading.gif">'; or this.receiveData = '<img src= "/views/loading/loading.gif">';