小编Saj*_*jax的帖子

我有一个表单,我需要用户输入一个持续时间,在资源中这被保存为分钟(或毫秒,易于更改).我需要指令取第二个/毫秒值然后为分钟,秒和毫秒创建3个单独的输入.

然后,用户可以修改每个组件,然后该指令将使用3个组件的秒/毫秒值更新模型.

我似乎能够获取模型值,创建3个输入并使用moment.js创建时间的单独组件.

指示

angular.module('myExampleApp')
  .directive('lapTimeInput', function () {
     var tpl = '<div class="lap_time_input"> \
              <input ng-model="lap_time.minutes" type="number" class="minutes" placeholder="00" min="0" max="15" step="1"> \
            <span class="lap-time-sep">:</span> \
            <input ng-model="lap_time.seconds" type="number" class="seconds" placeholder="00" min="0" max="59" step="1"> \
            <span class="lap-time-sep">.</span> \
            <input ng-model="lap_time.milliseconds" type="number" class="milliseconds" placeholder="000" min="0" max="999" step="1"> \
            </div>';

    return {
        restrict: 'A',
        template: tpl,
        replace: true,
        require: 'ngModel',
        scope: {
        },
        link: function (scope, element, attrs, ngModel) {

            if (!ngModel) return;

            scope.$watch(function () {
                return ngModel.$modelValue;
             }, function(newValue) { …

我试图了解如何在 Vuex 存储中使用值并进行一些格式化，关键是我试图找出 Vue 方法来格式化存储中对象中包含的时间戳并在迭代对象时。

例如使用以下商店

 const state = {
   events: {
     0: {
       id: 0,
       name: 'Example Event',
       start: 14907747374,
       end: 14907747674,
       entries: [0, 1]
     },
     1: {
       id: 1,
       name: 'Example Event 2',
       start: 14907740364,
       end: 14907740864,
       entries: [1]
     }
   },
   entries: {
     0: {
       id: 0,
       name: 'John Doe',
     },
     1: {
       id: 1,
       name: 'Paul Smith'
     }
   }
 }

然后我有一个 getter 来返回所有事件

export const events = state => state.events

然后我想在组件中将事件显示为列表/表格等

<template>
  <div class="events">
    <template v-for="event in …