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"`.
Related
I have 2 autocomplete inputs :
<template>
<b-autocomplete
v-model="code"
:open-on-focus="true"
#input="updateDescription"
/>
<b-autocomplete
v-model="description"
:open-on-focus="true"
#input="updateCode"
/>
</template>
<script>
export default {
data () {
return {
code: '',
description: ''
}
},
methods: {
updateCode (description) {
this.code = // function to find the code corresponding to the right description
},
updateDescription (code) {
this.description = // function to find the description corresponding to the right code
}
}
}
<script>
When, the code input is modified, I would like to update the value of the description input and in the same way, when the description is modified by the user, I would like the code input to be updated.
However, once code is modified, the #input is fired which update description and the fired the #input as well.
How can I only listen for the user event ?
Try with :value instead v-model:
new Vue({
el: '#app',
data () {
return {
code: '',
description: ''
}
},
methods: {
updateCode () {
this.code = 2
},
updateDescription () {
this.description = 3
}
}
})
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<div id="app">
<b-autocomplete
:value="code"
:open-on-focus="true"
#input="updateDescription"
></b-autocomplete>
<b-autocomplete
:value="description"
:open-on-focus="true"
#input="updateCode"
></b-autocomplete>
</div>
<script src="https://unpkg.com/vue#2"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
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
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 have editable element updated by component method, but i have also json import and i want to update element my parent method. I can update model, but editable element doesn´t bind it. If i insert content to component template, it will bind updated model, but then i can´t really edit it.
Here´s my example: https://jsfiddle.net/kuwf9auc/1/
Vue.component('editable', {
template: '<div contenteditable="true" #input="update"></div>', /* if i insert {{content}} into this div, it wil update, but editing behave weird */
props: ['content'],
mounted: function () {
this.$el.innerText = this.content;
},
methods: {
update: function (event) {
console.log(this.content);
console.log(event.target.innerText);
this.$emit('update', event.target.innerText);
}
}
})
var app = new Vue({
el: '#myapp',
data: {
herobanner: {
headline: 'I can be edited by typing, but not updated with JSON upload.'
}
},
methods: {
uploadJSON: function (event) {
var input = event.target;
input.src = URL.createObjectURL(event.target.files[0]);
var data = input.src;
$.get(data, function(data) {
importdata = $.parseJSON(data);
this.$data.herobanner = importdata.herobanner;
}.bind(this));
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main id="myapp" class="container-fluid">
<input type="file" id="file" name="file" #change="uploadJSON" style="display: none; width: 1px; height: 1px"/>
<a href="" onclick="document.getElementById('file').click(); return false" title="Import settings from JSON file">
upload JSON
</a>
<h1>
<editable :content="herobanner.headline" #update="herobanner.headline = $event"></editable>
</h1>
Real value of model:
<br>
<h2>{{herobanner.headline}}</h2>
</main>
Working example:
Vue.component('editable', {
template: `
<div contenteditable="true" #blur="emitChange">
{{ content }}
</div>
`,
props: ['content'],
methods: {
emitChange (ev) {
this.$emit('update', ev.target.textContent)
}
}
})
new Vue({
el: '#app',
data: {
herobanner: {
headline: 'Parent is updated on blur event, so click outside this text to update it.'
}
},
methods: {
async loadJson () {
var response = await fetch('https://swapi.co/api/people/1')
var hero = await response.json()
this.herobanner.headline = hero.name
},
updateHeadline (content) {
this.herobanner.headline = content
}
}
})
<main id="app">
<button #click="loadJson">Load JSON data</button>
<h1>
<editable
:content="herobanner.headline"
v-on:update="updateHeadline"
>
</editable>
</h1>
<h2>{{herobanner.headline}}</h2>
</main>
<script src="https://unpkg.com/vue#2.5.3/dist/vue.min.js"></script>
My HTML:
<paginate
:pageCount="max"
:containerClass="'pagination'"
:clickHandler="redirectToPage"
:force-page="selectedPage">
</paginate>
max is getter from vuex. When paginate is loading max = undefined, so I need to set pageCount after value max is changed.
In offical docs only static value:
Taking Belmin Bedak's comment into account, here it is working with a v-if to make it wait for pageCount to load. In testing, I found that updating pageCount works as expected: the number of pages available is updated.
vm = new Vue({
el: '#app',
data: {
max: null
},
components: {
paginate: VuejsPaginate
},
methods: {
clickCallback: function(page) {
console.log(page);
}
},
mounted() {
// Pretend we're getting from vuex
setTimeout(() => {
this.max = 7;
}, 1000);
}
});
<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://unpkg.com/vuejs-paginate#0.8.0"></script>
<div id="app">
<paginate v-if="max"
:page-count="max"
:container-class="'pagination'"
:click-handler="clickCallback">
</paginate>
<div v-else>
Loading...
</div>
</div>