I am working on a vuejs repeatable component that will allow a user to due several things---enter a question and select the answer type from the drop down. Issue is based on the type, I need to display a select number of boxes if its multiple choices so it can update an array. I cannot figure out how or where to add this. I also need to make these variable (f1 and f2 dynamic) so that it can be reused at other times. So if its a single line choose f1 if it is multiple choice select f2. Someone please provide some direction
Vue.component('my-input', {
template: '<input v-attr="name: name" v-model="value" type="text">' + '<select>' + '<option value="type1">Multiple Choice</option>' + '<option value="type2">single line</option>' + '<option value="type3">multi-line</option>' + '</select><br>'+'<br>'+'</br>',
data() {
return {
value: '',
brand: 'multiple-choice',
options: ['option a, option b'] };
},
props: ['name'] });
new Vue({
el: '#app',
data: {
message:'',
inputs: [{ type: 'my-input' }]
},
mounted: function () {
this.getAllPages();
},
methods: {
addInput() {
this.inputs.push({ type: 'my-input' });
},
getAllPages: function () {
var vm = this;
$.ajax({
url: vm.config.domainRoot + "/_api/web/lists/getbytitle('" + vm.config.listName + "')/items",
type: 'Get',
headers: {
"Accept": "application/json; odata=verbose"
},
success: function (data) {
vm.pages = data.d.results;
console.log(vm.pages);
}
})
},
createCustomL:function(){
// Get filed collection
var fldCollection = oList.get_fields();
var f1 = clientContext.castTo(
fldCollection.addFieldAsXml('<Field Type="Text" DisplayName="NewField" Name="NewField" Required="True"/>', true, SP.AddFieldOptions.addToDefaultContentType),
SP.FieldText);
f1.set_title("q1");
f1.set_description(mydescription);
f1.update();
//Get filed collection
var fldCollection = oList.get_fields();
var f2 = clientContext.castTo(
oList.get_fields().addFieldAsXml('<Field Type="Choice" DisplayName="state" Name="fldchoice" />', true, SP.AddFieldOptions.addToDefaultContentType),
SP.FieldChoice);
var choices = Array("None", "California", "Colorado", "Connecticut", "Georgia", "Indiana");
f2.set_choices(choices);
f2.update();
}
}
});
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vue.js repeater</title>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="app">
<p>Enter your ques</p>
<component v-repeat="inputs" is="{{ type }}" name="inputs[]">
</component>
<button v-on="click: addInput">Add Question</button>
</div>
<br>
<button v-on:click="createCustom">Generate</button>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.js'></script>
<script src="./script.js"></script>
</body>
</html>
I don't know if i understand correctly but if you want to pass different data to your component dynamically you can use props.
Take a look here https://v2.vuejs.org/v2/guide/components-props.html
Related
I'm pretty new in Vue and I'm trying to write down a function that returns true or false on a given data when input modified. I have 4 different data that I need possibly to change the truthiness.
My logic was to produce a function that accepts data as parameter but... It doesn't work. Maybe it's not the proper way to go for...
Here the HTML:
<input type="text" v-model="bannerContent.button" #input="checkMaxChar(48,bannerContent.button.length,isButtonTooLong)" id="banner-button">
And the JS
var app = new Vue({
el: '#app',
data: {
bannerContent: {
title : 'Title',
text: 'Text',
copyright: 'Copyright',
button: 'Button'
},
isButtonTooLong: false,
},
methods: {
checkMaxChar: function(a,b,c) {
var vm = this
if( a < b ) {
vm.c = true;
};
console.log(this.c);
}
}
})
I'm not sure why you are doing var vm = this and also where do you defined c?
for your purpose define c in the data section like code below and work wit your input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<input
type="text"
v-model="bannerContent.button"
#input="checkMaxChar(48,bannerContent.button.length,isButtonTooLong)"
id="banner-button"
/>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
bannerContent: {
title: "Title",
text: "Text",
copyright: "Copyright",
button: "Button",
},
isButtonTooLong: false,
c: false,
},
methods: {
checkMaxChar(a, b, c) {
if (a < b) {
this.c = true;
}
console.log(this.c);
},
},
});
</script>
</html>
Hope it helps You ;)
Vue - #input is triggered by :placeholder in Internet Explorer 11 immediately upon page load not when entering a value. That is, the problem is only in the explorer. When the page loads, input is triggered immediately, but only if there is a placeholder
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Тег SCRIPT</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<component-c/>
</div>
<script type="text/javascript">
var ComponentA = Vue.component('ComponentA', {
props: ['field'],
methods: {
//#input is triggered by :placeholder in Interner Exployer 11 immediately upon page load not when entering a value
validator: function (ev){
console.log(ev.target.value, 'value in validator');
}
},
computed: {
fieldPlaceholder: function () {
return this.field.placeholder;
},
},
template: '<input type="password" #input="validator" :placeholder = "fieldPlaceholder">'
});
var ComponentС = Vue.component('ComponentB', {
data: function () {
return {
field: {
placeholder: 'place'
}
}
},
components: {
'component-a': ComponentA,
},
template: '<component-a :field = "this.field" />'
})
var app = new Vue({
el: '#app',
components: {
'component-c': ComponentС,
}
})
</script>
</body>
</html>
I try to use Vue components, but it is not working.
I also use Pug(Jade) like preprocessor.
But in result HTML code I have raw template without transformation from Vue component to HTML code.
Here is Vue component:
Vue.component('date-input', {
props: ['id', 'format', 'value'],
mounted: function() {
$(this.$el).children().last().datepicker({
autoclose: true,
format: this.format || 'dd.mm.yyyy',
language: 'ru'
});
},
beforeDestroy: function() {
$(this.$el).children().last().datepicker('destroy');
},
methods: {
onInput: function(event) {
this.$emit('input', event.target.value);
},
onIconClick: function() {
$(this.$el).children().last().datepicker('show');
}
},
template: '<div class="date-field">' +
'<span class="icon calendar" #click="onIconClick"></span>' +
'<input id="id" class="form-control" type="text" #input="onInput" :value="value">' +
'</div>'
});
Here is PUG code:
+agreementModal('MYMODAL','MODAL NAME')
.date-range.text-nowrap
date-input.mr-3
date-input
Result HTML code:
<div class="date-range text-nowrap">
<date-input class="mr-3"></date-input>
<date-input></date-input>
</div>
Welcome to SO!
You do not seem to initialize your Vue app (with new Vue()) at some point.
Declaring Vue.component is important so that Vue knows what to do with your custom components, but you still need to tell Vue to start managing a part of your DOM by initializing it.
Vue.component('date-input', {
props: ['id', 'format', 'value'],
mounted: function() {
$(this.$el).children().last().datepicker({
autoclose: true,
format: this.format || 'dd.mm.yyyy',
language: 'ru'
});
},
beforeDestroy: function() {
$(this.$el).children().last().datepicker('destroy');
},
methods: {
onInput: function(event) {
this.$emit('input', event.target.value);
},
onIconClick: function() {
$(this.$el).children().last().datepicker('show');
}
},
template: '<div class="date-field">' +
'<span class="icon calendar" #click="onIconClick"></span>' +
'<input id="id" class="form-control" type="text" #input="onInput" :value="value">' +
'</div>'
});
new Vue({
el: '#app'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://unpkg.com/vue#2"></script>
<div id="app" class="date-range text-nowrap">
<date-input class="mr-3"></date-input>
<date-input></date-input>
</div>
I have a dynamic img being pulled from an api using vue.js. For some strange reason, the image won't bind. I have tried both :src. and :attr but neither works. The url does display in the vue console inside of the data but can't get the image to display on the page. any help will go a long way.
<html>
<head>
<style></style>
</head>
<body>
<div class="container">
<div id="editor">
<img v-bind:src="PictureURL" />
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<script>
new Vue({
el: "#editor",
data: {
PictureUrl: "",
},
created: function() {
this.getCurrentUser();
},
methods: {
getCurrentUser: function() {
var root = 'https://example.com';
var headers = {
accept: "application/json;odata=verbose"
}
var vm = this;
var __REQUESTDIGEST = '';
$.ajax({
url: root + "_api/Properties",
type: 'Get',
headers: headers,
success: function(data) {
vm.PictureUrl = data.d.PictureUrl;
}
})
},
}
})
</script>
</body>
</html>
Change <img v-bind:src="PictureURL" /> to <img v-bind:src="PictureUrl" />, so that you match the data item name. Vue should be giving you an error in the console about this.
https://jsfiddle.net/kch7sfda/
Example here.
You can try to:
1. add v-if to img element
2. rename PictureUrl to pictureUrl (first lowercase letter)
I am trying to set up multiple returns in a computed property. Not sure why this is not working. I also tried repurposing the arrow function. What I am trying to do here, is when the application loads trigger the 'nearby' method that does a bit of filtering and also trigger the sortedItems method. I tried moving things around but it breaks. Is it possible to call both of these in in the userFilterkey:['nearby', 'someFunc']. I thought it would be cool, but doesn't work. I basically just need to trigger nearby and sortedItems on load.
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="app">
<div class="container">
<button v-on:click="userFilterKey='nearby'" :class="{active: userFilterKey == 'nearby'}">Show Completed Tasks</button><br><br>
<div class="panel panel-default" v-for="item in sortedItems">
<div class="panel-heading">Tracking ID#{{item.TrackingID}} <span class="pull-right"><small>last modified</small> {{item.Modified | date}} | <small>Created</small> {{item.Created | date}}</span>
</div>
<span class="pull-right" style="padding-bottom:10px;">status <strong>{{item.status}}</strong></span>
</div>
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
items: [],
userFilterKey:'nearby',
Title: ""
},
created: function() {
this.getData();
},
computed: {
sortedItems: function() {
return this[this.userFilterKey]
return this.items.sort((b, a) => new Date(a.Modified) - new Date(b.Modified));
},
itemFilter: function(){
return this[this.userFilterKey]
},
all: function(){
return this.items
},
nearby: function(){
alert("this")
return this.items.filter((items) => items.status=="New" | items.status=="in-progress")
}
},
filters: {
date: function(str) {
if (!str) {
return '(n/a)';
}
str = new Date(str);
return ((str.getMonth() < 9) ? '0' : '') + (str.getMonth() + 1) + '/' +
((str.getDate() < 10) ? '0' : '') + str.getDate() + '/' + str.getFullYear();
}
},
methods: {
getData: function() {
var root = 'https://example.com';
var headers = {
accept: "application/json;odata=verbose"
}
var vm = this;
$.ajax({
url: root + "_api/web/lists/getbytitle('Issues')/items?&$orderby=Created desc",
type: 'Get',
headers: headers,
success: function(data) {
vm.items = data.d.results;
console.log(vm.items)
}
})
}
}
})
</script>
</body>
A function will only reach one return so not sure what you're doing with sortedItems.
You would never be responsible for running nearby yourself. nearby runs whenever items changes. What you can do instead is have a single results computed property and do something like:
computed: {
results () {
return this.items
.filter(...)
.sort(...)
},
},
and use results in your template.
Also:
items.status=="New" | items.status=="in-progress"
should be:
items.status=="New" || items.status=="in-progress"
or even better:
items.status === "New" || items.status === "in-progress"`.