I'm trying to upload my images with this vue.js. i'm using this plugin for the task. But I need to change the language. In doc it's said we can change it by using props. And I did,
:drag-text='drag_text'
Here is my complete code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-upload-multiple-image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>
<div id="car_ad_others"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.22/dist/vue.js"></script>
<script type="text/javascript">
var parent = $('#car_ad_others').parent();
parent.html('<div id="car-image-upload"><upload-component></upload-component></div>');
$('#car_ad_others').parent().attr('id', 'car_ad_parent');
Vue.component('upload-component', {
props: ['dragText'],
data: function () {
return {
images: '',
uploadImageSuccess: '',
beforeRemove: '',
editImage: '',
dataChange: '',
drag_text: 'ddd'
};
},
template: "<div id='my-strictly-unique-vue-upload-multiple-image' style='display: flex; justify-content: center;'><vue-upload-multiple-image :drag-text='drag_text' #upload-success='uploadImageSuccess' #before-remove='beforeRemove' #edit-image='editImage' #data-change='dataChange' :data-images='images'></vue-upload-multiple-image></div>"
});
new Vue({el: '#car-image-upload'});
</script>
<script src="https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js"></script>
</body>
</html>
Unfortunately it didn't got translated and I'm getting this error too,
[Vue warn]: Unknown custom element: - did
you register the component correctly? For recursive components, make
sure to provide the "name" option.
Properties are in this link. And I have simplified my code to show the issue easier. So I cant change the structure.
It seems, there's a bug in the library itself. The codepen in the document doesn't seem to respond to props change. About your [Vue warn]: Unknown custom element: warning, somehow this worked for me:
components: {
'vue-upload-multiple-image': () => import('https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js')
},
and comment <script src="https://unpkg.com/vue-upload-multiple-image#1.0.2/dist/vue-upload-multiple-image.js"></script>
I am still trying to figure out how but it should be something related to local registration components vs global registration of the components. I will improve this answer as I come along with better and concrete explanation
try this
:drag-text="drag_text"
:drag-text = "'your text as string'"
Related
now im learning vuejs, and have some problem,
i hope someone can help me.
i've index.html and app.js, when i run in browser in the console it printed :
vue.js:634 [Vue warn]: Property or method "count" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
but the question is, why the function still work when i click the button?
here is my complete code:
Vue.component('click-counter', {
template: '<button #click="count++">{{ count }}</button>',
data() {
return {
count: 0
}
}
})
Vue.component('click-counter-using-defined-template', {
template: '#click-counter-template',
data() {
return {
count: 0
}
}
})
new Vue({
el: '#app'
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning</title>
</head>
<body>
<div id="app">
<h1>learning component</h1>
<!-- basic component -->
<click-counter></click-counter>
<!-- component template -->
<!-- Remember! Component template must contain exactly one root element. -->
<click-counter-using-defined-template></click-counter-using-defined-template>
<script type="text/x-template" id="click-counter-template">
<div style="border: 1px dashed orange;">
<p>we re counter</p>
<button #click="count++">{{ count }}</button>
</div>
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>
In your code, "text/x-template" is actually inside the div the vue instance is attached to. Vue documentation states that template definition in this manner needs to be outside the attached DOM element, By moving the template code outside the attached div, the warning goes away.
https://v2.vuejs.org/v2/guide/components-edge-cases.html#X-Templates
Your x-template needs to be defined outside the DOM element to which Vue is attached.
In your code, Vue is encountering 'count' inside the attached div, but 'count' is not actually defined inside the root instance. The warning most likely stems from this.
I have a scenario where I want the v-model binding of an Input field to be decided by the value returned by a computed property.
Please see the example below:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
{{value}}
<input type="text" v-model="myName.first">
<input type="text" v-model="myName.second">
</div>
<script>
new Vue({
el:'#app',
data:{
value:{
first: '',
second: ''
}
},
computed: {
myName: {
get(){
return {first:'this.value.first',second:'this.value.second'}; //this will actually come from an API
},
set(newValue){
this.value.first = newValue.second;
this.value.second = newValue.second;
}
}
}
});
</script>
</body>
</html>
As you can see in the above code, I want the first field to be bound to value.first and second value to be bound to value.second. For both fields, I want the model binding to be decided by the value returned from computed property. Right now it's a simple example and there are only two returned value, i.e., value.first and value.second. But this will be decided on logic.
I feel I am not making use of get and set correctly. Really appreciate any help.
Note: I had a previous question on similar lines but it had only one value returned in computed property instead of an array/object. The answer provided worked great However, this time the challenge is that we have two values that need to be set. You can see that thread here: Vuejs Input Binding Based on Computed Property
You can v-model directly to a computed property without using data or set/get.
CodePen
<input type="text" v-model="myName.first">
data:{},
computed: {
myName: function() {
return this.$store.state.myName; //or whatever your api is
}
}
Also, make sure the value of your computed property is present before your input loads.
Consider the following code:
Inside jQuery document.ready:
$.fn.editable.defaults.mode = 'popup';
$("#username").editable({
send: 'never',
success: function(response, newValue) {
userModel.set('username', newValue); //update backbone model
}
});
HTML:
<div class="editable">
superuser
</div>
This throws Uncaught TypeError: this.tip(...).find is not a function at jqueryui-editable.js:4727.
I assume this is because of incompatibilities with the jQuery UI version. But how can I get around it?
Update: Adding full example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/jqueryui-editable/js/jqueryui-editable.min.js"></script>
<script>
$(function() {
$.fn.editable.defaults.mode = 'popup';
$("#username").editable({
send: 'never',
success: function(response, newValue) {
userModel.set('username', newValue); //update backbone model
}
});
});
</script>
</head>
<body>
<div class="editable">
superuser
</div>
</body>
</html>
I had the same error, but solved it by using an older version of jquery-ui. I was on v 1.12.0, but noticed the editable demo used 1.10.1. Using the 1.10.1 version of jquery-ui allowed me to use editable.
I'm using
https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/smoothness/jquery-ui.css
and
https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js
I think this is a bug in the source code specific to jqueryui 1.11.4.
It doesn't look like the jquery version of the source code has been touched since 2013, so I don't think it'll be fixed anytime soon. Unfortunately this is the most functional inplace editing library I've found, so I was determined to make it work.
A decent alternative is to use the "plain" version of the library which doesn't use jqueryui at all. It appears to me to be functionally equivalent. If you want the "popup" instead of "inline" mode, you need to also grab and include poshytip
Hello I'm new to javascript, and I'm try to write out some code for a test site and I'm having some problems, dow below is my code and I keep getting this error and i can't figure out why.
TypeError: null is not an object (evaluating 'document.getElementById("h3").innerHTML = "<h3>You Are up to date!</h3>"')
This is my second method i tried using. what I'm trying to do it have a have a version list this first one i had was that it would pull a .js file and build a table, but that didn't work so i thought i would try this, but guess what happened? not working
my code that I'm using now is below. if you can help that would be amazing.
thanks, Dakmessier
var current = "1.0";
function get_latest(){
document.getElementById("bob").innerHTML = current;
}
if (local != current){
document.getElementById("Get").innerHTML = "<button>Get the Latest Update!</button>";
} else if (local == current){
document.getElementById("h3").innerHTML = "<h3>You Are up to date!</h3>";
} else {
document.getElementById("h3").innerHTML = "<h3>Sorry, unable to check for update.</h3>";
}
document.getElementById(id) finds an element with a given id value in your HTML. An id value looks like this:
<div id="myHeader">Some Content</div>
And, then you can find that element with:
document.getElementById("myHeader");
ID values must be unique in each document so there should only ever be one element with a given ID.
If an id isn't what you really want, you can find elements other ways, by tag type, by class name, by attribute, etc... using CSS selectors with document.querySelectorAll().
For example, if you wanted to find all <h3> tags, you could do this:
var items = document.querySelectorAll("h3");
Here are some other reasons that document.getElementById(...) might fail to find what you want it to find:
The Javascript code is running before the DOM elements have been parsed and loaded so thus the element is actually not there yet when you're running the code. This is common with code run from the <head> section of the document.
You have an HTML error in how you are specifying the id value in the HTML.
You have an HTML error that causes the browser not to parse your HTML properly.
You have a script error that cause your script to abort before it gets to the part you want to run.
Indeed document.getElementById returns null if it can't find an element with the Id specified.
Also the statement:
if (local != current){
// ..
} else if (local == current){
// ..
} else {
// ..
}
is a bit odd. If local != current is false then local == current must be true. The else if (...) is redundant and the else part will never be run.
hey man the bast thing you should do is the following example, feel free to copy it on your snippet of code:
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
<!DOCTYPE html>
<html>
<body>
<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
</body>
</html>
I WILL EXPLAIN YOU THIS ANSWER: this is an html + an inline script that makes the inner html work. As far as concerned with your answer it was unclear where your code stopped, anyway test my snippet of code and let me know
I know it's an old question, but I was having the same issue and was trying hard to find the solution for some time.
The problem was that I was executing the script before the page loaded. Thus it wasn't able to find the object that we're trying to catch.
So either use jquery document.ready function or else move your script to the end of the html.
I hope this helps
fix an error of getting the value of a as null
Uncaught TypeError: a is null
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
let a = document.getElementById('i');
document.addEventListener('mouseup',function(){
a.innerHTML='clean';
})
</script>
<body>
<h3 id="i">not clean</h3>
</body>
</html>
this shows as error in console as
Uncaught TypeError: a is null
you can fix it by making your script tag before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3 id="i">not clean</h3>
<script>
let a = document.getElementById('i');
document.addEventListener('mouseup',function(){
a.innerHTML='clean';
})
</script>
</body>
</html>
this might fix!!
I created a MVC 4.0 project to test Knockout, the mark up is shown below (BTW I loaded all the latest stuff from NUGET) What is shown below is the client side source after the rendering of the View from MVC. I've looked at the network side and saw all the links and scripts arrive at the client. Browser is Chrome. The console doesn't show any errors. Finally, the myMessage text is never rendered. If I put breakpoints in the JS, I do see that the Knockout library is called... Just wondering what I'm doing wrong here.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/knockout-3.2.0.js"></script>
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<h2>Index</h2>
Today's message is: <span data-bind="text: myMessage"></span>
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable() // Initially blank
};
viewModel.myMessage("Hello, world!"); // Text appears
</script>
</body>
</html>
you need to call ko.applyBindings. try this:
<script type="text/javascript">
var viewModel = {
myMessage: ko.observable() // Initially blank
};
ko.applyBindings(viewModel) // you need to initialize ko :)
viewModel.myMessage("Hello, world!"); // Text appears
</script>
well you missed the most important part in knockout 'applyBindings' .
Once you construct your view model you just need to call
Step 1: Starting point
ko.applyBindings(viewModel)
step 2: next view model executes
var viewModel = {
myMessage: ko.observable()
};
Refer knockout documentation http://knockoutjs.com/documentation/introduction.html
Sample fiddle to test your scenario Here