Vuejs

I currently have an object similar to the following in a Vue.js app that I'm trying to port over to TypeScript. Note this object's structure is dictated by the Vuex library:

const getters = { allUsers(state) { return state.users; }, firstUser(_state, getters) { return getters.allUsers()[0] } }

How can I provide the appropriate type for getters here in firstUser?

const getters = { allUsers(state: State) { return state.users; }, firstUser(_state: State, getters: typeof getters) { return getters.allUsers()[0] } }

Currently I get the following error:

[ts] 'getters' is referenced directly or indirectly in its own type annotation.

My app has an array in the vuex store. I am iterating over it with v-for to build a table. When I add or delete an item, I use push or splice on the array in the vuex store. An item appears or disappears from the table, but sometimes one of the items has values of one of the other items instead of the correct values. When I inspect the vuex store with the chrome dev tools, it always has the right values. When I navigate away and back, the table then has the right values. Is there something I’m missing? I found this when I was googling: https://vuejs.org/v2/guide/list.html#Array-Change-Detection, but it’s not really clear what I’m supposed to do with that info.

I use axios to make post request

import axios from 'axios' params = {'HTTP_CONTENT_LANGUAGE': self.language} headers = {'header1': value} axios.post(url, params, headers)

is it coorect?

or axios.post(url, params: params, headers: headers) is correct?

The issue I currently run into is that I have a form component that displays both the login form and the register form. It is as follows:

<template> ... <login-form v-show="isVisible.login" v-on:submit.prevent="handleLoginFormSubmit()"></login-form> <register-form v-show="! isVisible.login" v-on:submit.prevent="handleRegisterFormSubmit()"></register-form> ... </template> <script> import LoginForm from './LoginForm.vue'; import RegisterForm from './RegisterForm.vue'; export default { data() { return { isVisible: { login: true } } }, components: { 'login-form': LoginForm, 'register-form': RegisterForm, }, methods: { handleLoginFormSubmit() { }, handleRegisterFormSubmit() { } } } </script> <style> </style>

The error I receive looks like this:

[Vue warn]: Property or method "isVisible" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

---> <LoginForm> at /Users/chrisbreuer/code/ordering/resources/assets/app/js/components/LoginForm.vue [Vue warn]: Error in render function: "TypeError: Cannot read property 'login' of undefined" found in ---> <LoginForm> at /Users/chrisbreuer/code/ordering/resources/assets/app/js/components/LoginForm.vue

How do I correctly register a component within a component?

I created a root node and two components, on root node i have a text field to search, which is sended dinamicaly to each component to search in an array and that they are rendered, additionally a each component is send a reference function for indicate if array is empty. But, when i enter text in input field of console show this message:

[Vue warn]: You may have an infinite update loop in a component render function.

found in

--->

My code:

var links =[...]; var links2 =[...]; var template = ` <section class="section has-text-centered" v-if="searchBy.length > 0"> <section class="container"> <p class="subtitle has-text-dark">{{subtitle}}</p> <section class="columns is-multiline "> <section class="column column-fixed" v-for="link in searchBy"> <a v-bind:href="link.url" onclick="window.open(this.href); return false;"> <strong> {{link.title}} </strong> <figure class="image is-96x96"> <img class="" v-bind:src="link.img"> </figure> </a> </section> </section> <hr> </section> </section> ` Vue.component('links',{ props:['links','subtitle', 'search'], template:template, computed:{ searchBy:function(){ if(this.search !==''){ var _links = this.links.filter((link)=>{ return link.title.toLowerCase().search(this.search.toLowerCase()) == 0 }) console.log('_links: ', _links); (_links.length > 0)? this.$emit('empty',false):this.$emit('empty',true); return _links; } return this.links; } } }) new Vue({ el:"#links", data:{ brand:"Enlaces", title:"Acceso Rápido", subtitle_private:"Guardián del ALBA - PDVSA", subtitle_public:"Públicos", links:links, links2:links2, search:'', thereAreLinks:0 }, methods:{ linksEmpty(status){ console.log('hay resultados: ', status); (status)?this.thereAreLinks++:this.thereAreLinks--; } } })

html container:

<div class="container"> <links :links="links" :subtitle="subtitle_private" :search="search" @empty="linksEmpty"></links> <links :links="links2" :subtitle="subtitle_public" :search="search" @empty="linksEmpty"></links> <h2 class="title has-text-centered" v-if="thereAreLinks > 1"> No results: <span class="has-text-danger">{{search}}!</span> </h2> </div>

Some idea?

I am using VueJS and the $http package to do API calls to my website. However, it seems that on Google Chrome 60.0.3112.90, the data property of the Response object no longer parses the received JSON and instead passes back a string.

Is this a bug in Google Chrome? The site was working fine yesterday and with no changes, no ajax call works today. I can only assume its the new version of Chrome as the latest FireFox works just fine.

Anyone else experienced this?

While following the vue-stripe installation directions, which mainly consists of a simple import { StripeCheckout } from 'vue-stripe' I received the following warning from Webpack:

"export 'StripeCheckout' was not found in 'vue-stripe'

(Technically I am using laravel-mix as a wrapper around Webpack.)

I have no clue why it isn't working. Everything on my system is reasonably up-to-date. It's a Laravel 5.4 app on the back-end with a SPA on the front-end using Vue 2 and vue-router, and it uses yarn instead of npm, with a lot of Vue components.

I've some component in VueJs that looks like this:

export default { name: 'RecruitForm', data() { return { form: { child: {}, mother: {}, father: {} }, isSubmiting: false, isValid: true } }, methods: { submit: () => { this.isSubmiting = true; this.isValid = true; let validateObject = (obj) => { var keys = Object.keys(obj); if(keys.length === 0){ return false; } for (var key in keys) { if (!this.form[key]) isValid = false; } } validateObject(this.form.child); validateObject(this.form.mother); validateObject(this.form.father); } } }

When the validateObject method is fired and I'm trying to access nested properties of form object I get can not read property 'child' of undefined error. While debbuging in console I can see that the form is not regular object but {__ob__: Observer}

I have a Vue component registered with:

Vue.component('logo', function (resolve) {require(['./components/layout/Logo.vue'], resolve)});

The component itself is defined as:

<template> <div> <div class="title"> <a href="/"> <h1>Welcome to my Site!</h1> </a> </div> <navigation></navigation> </div> </template> <style scoped> h1 { text-decoration: underline; text-align: center; color: #000000; } </style> <script> import Navigation from './Navigation.vue'; export default { data() { return { msg:'hello vue' } }, components: { Navigation } } </script>

Logo.vue and Navigation.vue are in the same directory. Webpack does not complain when running.

When the site loads though there is a console error reported:

app.js:142 TypeError: Cannot read property 'call' of undefined at __webpack_require__ (app.js:50) at app.js:883 at <anonymous> __webpack_require__.oe @ app.js:142 Promise rejected (async) (anonymous) @ app.js:883 resolveAsyncComponent @ app.js:33890 createComponent @ app.js:35368 _createElement @ app.js:35578 createElement @ app.js:35517 vm._c @ app.js:35857 (anonymous) @ VM449:2 Vue._render @ app.js:35909 updateComponent @ app.js:34319 get @ app.js:34662 Watcher @ app.js:34651 mountComponent @ app.js:34323 Vue$3.$mount @ app.js:39644 Vue$3.$mount @ app.js:41847 Vue._init @ app.js:36017 Vue$3 @ app.js:36102 (anonymous) @ app.js:886 __webpack_require__ @ app.js:50 (anonymous) @ app.js:857 __webpack_require__ @ app.js:50 (anonymous) @ app.js:145 (anonymous) @ app.js:148 app.js:50 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at __webpack_require__ (app.js:50) at app.js:883 at <anonymous>

I am quite new to Vue and am making a project that can be used on both Desktop and Mobile.

I am using vue-router to manage the routing in my project and I have nested views for some pages.

For example:

• I have a settings page

• This page has a navigation role and 2 sub-routes (like account or preferences)

• So I have 3 components, one Settings (do the nav and have a router-view). And one for each nested route.

Here in my router configuration

{ path: '/settings', name: 'settings', component: Settings, children: [ { path: 'account', name: 'settings-account', component: Account }, { path: 'preferences', name: 'settings-preferences', component: Preferences } ] }

Here in Settings.vue

<template> <nav> <!-- some router-link s --> </nav> <router-view></router-view> </template>

My question is: When the user is on desktop, the router-view and the nav are on the same screen, which is fine.

But when the user is on a mobile, I would like to load another full page like /settings/account instead of having everything on the same.

Like a classic master-detail flow.

How can I implement this ? Should I declare another component and another route like

{ path: '/settings/account', name: 'settings-account-mobile', component: SettingsAccount }

Or is there a better way to do that ?

Thanks for any advice

[my-project-directory] is the full path of my project.

I started off with the webpack project via "vue init webpack my-project", as per the official Vue.js documentation.

I am attempting to switch to TypeScript by adding vuetype.

I've added a resources.d.ts file to the root of my src directory, though I'm unsure how it's being referenced:

declare module "*.vue" { import Vue from 'vue' export default Vue }

I've switched the entry to ts in webpack.base.conf.js:

var path = require('path') var utils = require('./utils') var config = require('../config') var vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: { app: './src/main.ts' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.ts', '.vue', '.json'], alias: { '@': resolve('src') } }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] } }

This is my main.ts file. Note that if I change the import to './App' (without the .vue, it gives me "(2,17): error TS2307: Cannot find module './App'.":

import Vue from 'vue' import App from './App.vue' new Vue({ el: '#app', render: h => h(App) })

In App.vue I've added the lang="ts", used Component from the vuetype libraries:

<template> <div>TEST</div> </template> <script lang="ts"> import Vue from 'vue' import { Component } from 'vue-property-decorator' @Component export default class App extends Vue { name: 'app' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

The App.vue.d.ts output:

import Vue from 'vue'; export default class App extends Vue { name: 'app'; components: { Hello; Game; }; }

My package.json:

{ "name": "dominant-species", "version": "1.0.0", "description": "A Game", "author": "Frank Rizzi", "private": true, "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js" }, "dependencies": { "@types/core-js": "^0.9.42", "core-js": "^2.5.0", "ts-loader": "^2.3.2", "vue": "^2.4.2" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-loader": "^7.1.1", "babel-plugin-transform-runtime": "^6.22.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "chalk": "^2.0.1", "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "cssnano": "^3.10.0", "eventsource-polyfill": "^0.9.6", "express": "^4.14.1", "extract-text-webpack-plugin": "^2.0.0", "file-loader": "^0.11.1", "friendly-errors-webpack-plugin": "^1.1.3", "html-webpack-plugin": "^2.28.0", "http-proxy-middleware": "^0.17.3", "opn": "^5.1.0", "optimize-css-assets-webpack-plugin": "^2.0.0", "ora": "^1.2.0", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "url-loader": "^0.5.8", "vue-class-component": "^5.0.2", "vue-loader": "^12.1.0", "vue-property-decorator": "^5.2.1", "vue-style-loader": "^3.0.1", "vue-template-compiler": "2.4.2", "webpack": "^2.6.1", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-middleware": "^1.10.0", "webpack-hot-middleware": "^2.18.0", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }

My tsconfig.json:

{ "compilerOptions": { // ... other options omitted "experimentalDecorators": true, "allowSyntheticDefaultImports": true, "lib": [ "es6", "es2015.promise", "es2015.iterable", "dom","dom.iterable","es2015" ], "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "target": "es6", "noImplicitAny": false }, "exclude": [ "node_modules" ] }

And here is the full error:

Module build failed: Error: Could not find file: '[MyDirectory]\src\App.vue'. error in ./src/App.vue Module build failed: Error: Could not find file: '[my-project-directory]\ src\App.vue'. at getValidSourceFile ([my-user-directory]\npm\node_modules \typescript\lib\typescript.js:89078:23) at Object.getEmitOutput ([my-user-directory]\npm\node_modul es\typescript\lib\typescript.js:89448:30) at getEmit ([my-project-directory]\node_modules\ts-loader\dist\index. js:114:43) at successLoader ([my-project-directory]\node_modules\ts-loader\dist\ index.js:34:11) at Object.loader ([my-project-directory]\node_modules\ts-loader\dist\ index.js:21:12) @ ./src/App.vue 8:2-94 @ ./src/main.ts @ multi ./build/dev-client ./src/main.ts

Versions:

node -v v6.11.2 npm -v 3.10.10 tsc -v Version 2.4.2

I want to add a background image that covers the whole page. However this is how it looks now :

I want it to span the whole web page. How would this be done in vue.js?

I also want an animated toolbar so that when the page is not scrolling the toolbar is transparent and takes the look of the background image. When it scrolls the toolbar will have the current blue color

Here is my fiddle

vue.js project

THIS is the HTML

<template> <div id = "background"> <div class = "" id = "explain"> <h1 class = "md-title">{{ message }}</h1> <h3> Collect, analyse and do better with data!</h3> </div> <hr> <md-layout id = "container"> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <span class="md-headline">HOW does levi function ?</span> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <h3>levi uses research and experimentation to provide 'actionable knowledge' that you can use to <b>do well </b>in your environment. </h3> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33"> <h4> Identify and Collect what is needed</h4> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33"> <h4> Organize and analyse the evidence</h4> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="33" md-flex-large = "33" md-flex-xlarge = "33"> <h4>Communicate and act on the evidence! </h4> </md-layout> </md-layout> <md-layout id = "Identity"> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <span class="md-headline"> HOW do we exist?</span> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> Our team realized that many institutions are unable to deconstruct their environment and respond to its need because; they do not have the cost effective products, proper processes , and the necessary execution techniques required to do so. <p>levi has been built to provide the platform and process necessary to help those in need <b>do well.</b></p> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <span class="md-headline">WHAT do we do?</span> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> Our community combines products and processes to augment human intelligence, reduce waste, and provide wellbeing. </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> <span class="md-headline"></span> </md-layout> <md-layout md-flex-xsmall="100" md-flex-small="100" md-flex-medium="100" md-flex-large="100" md-flex-xlarge="100"> </md-layout> </md-layout> </div> </template>

THIS is the CSS

<style scoped> h1 { font-family: Helvetica neue; text-align: center; font-weight: 400; font-size: 49px; line-height: 1.1em; font-family: Heiti SC; } h2 { font-family: Helvetica neue; text-align: center; font-weight: 600; font-size: 19px; } h3 { font-family: Helvetica neue; text-align: center; font-weight: 300; font-size: 19px; } h4 { font-family: Helvetica neue; text-align: center; font-weight: 300; font-size: 19px; } #Identity > .md-layout { /*background-color: lightgrey;*/ border-color: black; align-items: center; justify-content: center; /*border-style: dotted;*/ border-width: 1px; padding: 8px; font-weight: 200; font-size: 20px; line-height: 1.4em; } span { font-family: Helvetica neue; }

THIS is the css syntax for rendering the background.

#background { background: url(../../assets/whiteCoffeedarken.jpg); } #container > .md-layout { /*background-color: lightgrey;*/ border-color: black; align-items: center; justify-content: center; /*border-style: dotted;*/ border-width: 1px; padding: 8px; } </style>

I am working on a VueJS project. I have defined many components. Some times components are used inside another component. For example if I have OuterComponent.Vue + OuterComponent.js which has another InnerComponent.Vue + InnerComponent.js. How do I access the InnerComponent.js methods from OuterComponent.Vue + OuterComponent.js. How does webpack translates the objects names?

How do I access the setOptions in a vue template? I can't do HighCharts.setOptions({}); as the HighCharts object is not availaible - Im using VueHighCharts (https://github.com/superman66/vue-highcharts/) - Any examples would be appreciated:

I am trying to integrate the below graph(dagre-d3) to my vuejs application.

http://www.samsarin.com/project/dagre-d3/latest/demo/hover.html

I have successfully able to generate the graph inside the vuejs component. But i am not able to achieve the tooltip functionality which is provided in the graph. They are using a library called tipsy, when i run the graph in a plain html it works fine. But when i use inside the vue application its throwing the below error.

[Vue warn]: Error in mounted hook: "TypeError: $(...).tipsy is not a function" found in ---> <DagView> at

If i commented the below part graph is generating without any issue but tooltip is not showing.

inner.selectAll("g.node") .attr("title", function(v) { return styleTooltip(v, "Execution Time: "+g.node(v).label + " <br /> Description: "+g.node(v).label) }) .each(function(v) { **$(this).tipsy**({ gravity: "w", opacity: 1, html: true }) })

I'm working with the latest versions of vue-router, vuex and feathers-vuex and I have a problem with my router.

What I'm doing is to check if a route has the property "requiresAuth": true in the meta.json file. If it does then check the value of store.state.auth.user provided by feathers-vuex, if this value is not set then redirect to login.

This works fine except when I'm logged in and if I reload my protected page called /private then it gets redirected to login so it seems that the value of store.state.auth.user is not ready inside router.beforeEach.

So how can I set up my router in order to get the value of the store at the right moment?

My files are as follow:

index.js

import Vue from 'vue' import Router from 'vue-router' import store from '../store' const meta = require('./meta.json') // Route helper function for lazy loading function route (path, view) { return { path: path, meta: meta[path], component: () => import(`../components/${view}`) } } Vue.use(Router) export function createRouter () { const router = new Router({ mode: 'history', scrollBehavior: () => ({ y: 0 }), routes: [ route('/login', 'Login') route('/private', 'Private'), { path: '*', redirect: '/' } ] }) router.beforeEach((to, from, next) => { if (to.meta.requiresAuth) { if (!store.state.auth.user) { next('/login') } else { next() } } else { next() } }) return router }

meta.json

{ "/private": { "requiresAuth": true } }

I am trying to make a basic GET call to an API using JSON API specifications with deeply nested relationship data. I'm experiencing an issue with axios or vue manipulating my data...

Paying attention to pickup and delivery relationships, the raw data looks like the following:

{ "data": { "type": "parent", "id": "34", "attributes": { // ... }, "relationships": { "r1": { "data": [ { "type": "nextparent", "id": "62", "attributes": { // .. }, "relationships": { "pickup": { "data": [ { "type": "package", "id": 521, "attributes": { // ... } }, // ... ] }, "delivery": { "data": [] } } }, // ... ] } } } }

... where pickup has an array of objects and delivery has an empty array. However, when I try to retrieve the response in the callback, delivery is an exact copy of pickup.

var promise = window.axios({ url: window.baseApi + '/my-object/34', method: 'get' }) promise.then(function (response) { console.log(response) })

Additionally, I checked the response from the axios transformResponse function and the raw json was correct. This is only happening in the callback.

Whenever you run console.log(response) in the callback, Vue's observers are applied to the response object, which makes me wonder if this is a Vue issue considering that only the relationships of the first r1 object experience this.

Will update with fiddle, as soon as I can.

i am using the dragable and sortable with vuejs, and i have a issue, everytime i change the position of two divs for example, they change but the json array doesn't update.

I am working with vuex, and i have in my component template this html:

<draggable v-model="myList"> <div class="panel panel-primary" v-for="(value, key, index) in this.$store.getters.getDocumentAttributes"> <div class="panel-body quote"> <span @click="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove text-info"></span> <p>{{value.key}}</p> </div> </div> </draggable>

then i got my computed prop that gets and sets the data that come from vuex,

computed: { sections() { return this.$store.getters.getDocument; }, myList: { get() { return this.$store.getters.getDocument.getDocumentAttributes; }, set(value) { this.$store.commit('updateList', value) } } },

the updateList should update my list(if i am thinking well) so i have this:

}, mutations: { updateList: (state,list) => { state.Doc.atributes = list; } }, document: { "id": "0", "atributes": [] },

i try to replace the old array with the new matching with the atributes array, any help with this?

ps: the document is inside the data, i just tried to place the necessary code.

Thanks

I created a project using the vue cli generator, and I want to write tests for it using jest.

I followed This Hackernoon Tutorial and it took me 90% of the way. I have one last bug which I would like to solve:

I am using Bootstrap Vue in my application, and when I wrote my tests with mocha, all I had to do for the components in this lib to be available during tests is to add Vue.use(BootstrapVue); in the index.js file in <project folder>/test/unit/index.js

jest seems to ignore this, and throws:

console.error node_modules/vue/dist/vue.common.js:481 [Vue warn]: Unknown custom element: <b-jumbotron> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in <Root>)

I am also using other components in a similar way, and they all throw similar errors.

How can I solve this?

(if any additional information/code is needed, please write in the comments, and I'll edit this question)

I am new to Vue.js, trying to understand computed values. In particular, I am returning json data from my REST API, and in that data is a field called date that is in unixtime (ie 1486231256). I want to transform that field to human readable, but the app is returning invalid date. Here is my code:

<script> import axios from 'axios' import moment from 'moment' export default { data: () => ({ errors: [], posts: [] }), // Fetches posts when the component is created. created () { axios.get('https://example.com/api/v1/?uid=1', { }) .then(response => { this.posts = response.data }) .catch(e => { this.errors.push(e) }) }, computed: { unixform () { return moment(this.posts.date, 'X').format('YYYY-MM-DD') } } } </script>

I don't think moment is the problem here, because if I change the function's return to simply this.posts.date or this.date, I get an error of undefined. So somehow, I am not accessing that property, and I can't figure out why.