wake-up-neo.net

Vue js wendet einen Filter auf ein v-Modell in einem Eingabefeld an

Hoffe, jemand kann mir helfen! Ich habe eine Anweisung erstellt, mit der das Jasny Bootstrap Plugin genauer um die Eingabemaske gekapselt wird. Alles läuft gut!

Jetzt habe ich einen benutzerdefinierten Filter erstellt, der vom Moment unterstützt wird, um das Datumsfeld zu formatieren!

Das Datumsformat, das ich von meiner Backend-Anwendung bekomme, ist JJJ-MM-TT und ich muss in der Ansicht als TT/MM/JJJJ anzeigen ... Ich habe v-model="date | myDate" versucht, aber es funktionierte nicht richtig!

JS

Vue.directive('input-mask', {
  params: ['mask'],

  bind: function() {
    $(this.el).inputmask({
      mask: this.params.mask
    });

  },
});

Vue.filter('my-date', function(value, formatString) {

  if (value != undefined)
    return '';

  if (formatString != undefined)
    return moment(value).format(formatString);

  return moment(value).format('DD/MM/YYYY');

});

var vm = new Vue({
  el: 'body',
  data: {
    date: '2015-06-26',
  }
});

HTML

<label>Date</label>
<input type="text" class="form-control" v-input-mask mask="99/99/9999" v-model="date">
<p>{{ date | myDate 'dd/mm/yyyy' }}</p>

Es gibt die JSBin wenn jemand interessiert ist!

Danke im Voraus!

EDIT: Besser erklären, was ich erwarte =)

Wenn die Seite zum ersten Mal geladen wird, erhält der Eingang den Wert von 2015-06-26 und ich möchte diesen Wert als DD/MM/YYYY anzeigen. So 26/06/2015! Es funktioniert erst richtig, wenn ich etwas schreibe!

16

Ich verstehe, was Sie zu tun versuchen. Aufgrund der wechselseitigen Bindung bei der Verwendung von v-model ist es jedoch möglicherweise besser, das Datum so zu formatieren, wie Sie es vom Server erhalten, und es dann mit dem gewünschten Format in zu verwenden Ihre Frontend-App ('DD/MM/YYYY'). 

Wenn Sie die Daten an das Backend zurücksenden, formatieren Sie sie einfach wieder in das gewünschte Serverformat ('YYYY-MM-DD').

In Ihrer Vue-App würde der Arbeitsablauf so aussehen:

 new Vue({
    el: 'body',
    data: {
      date: null,
    },
    methods: {
        getDataFromServer: function() {
                // Ajax call to get data from server

                // Let's pretend the received date data was saved in a variable (serverDate)
                // We will hardcode it for this ex.
                var serverDate = '2015-06-26';

                // Format it and save to vue data property
                this.date = this.frontEndDateFormat(serverDate);
        },
        saveDataToServer: function() {
            // Format data first before sending it back to server
            var serverDate = this.backEndDateFormat(this.date);

            // Ajax call sending formatted data (serverDate)
        },
        frontEndDateFormat: function(date) {
            return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY');
        },
        backEndDateFormat: function(date) {
            return moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD');
        }
    }
  });

Das funktioniert gut für mich, hoffe es hilft.

Hier ist eine Geige:

https://jsfiddle.net/crabbly/xoLwkog9/

Syntax UPDATE:

    ...
    methods: {
        getDataFromServer() {
                // Ajax call to get data from server

                // Let's pretend the received date data was saved in a variable (serverDate)
                // We will hardcode it for this ex.
                const serverDate = '2015-06-26'

                // Format it and save to vue data property
                this.date = this.frontEndDateFormat(serverDate)
        },
        saveDataToServer() {
            // Format data first before sending it back to server
            const serverDate = this.backEndDateFormat(this.date)

            // Ajax call sending formatted data (serverDate)
        },
        frontEndDateFormat(date) {
            return moment(date, 'YYYY-MM-DD').format('DD/MM/YYYY')
        },
        backEndDateFormat(date) {
            return moment(date, 'DD/MM/YYYY').format('YYYY-MM-DD')
        }
    }
  })
11
crabbly

Ich hatte ein ähnliches Problem, als ich einen Eingabewert in Großbuchstaben schreiben wollte.

Das habe ich am Ende getan:

// create a directive to transform the model value
Vue.directive('uppercase', {
  twoWay: true, // this transformation applies back to the vm
  bind: function () {
    this.handler = function () {
      this.set(this.el.value.toUpperCase());
    }.bind(this);
    this.el.addEventListener('input', this.handler);
  },
  unbind: function () {
    this.el.removeEventListener('input', this.handler);
  }
});

Dann kann ich diese Anweisung im Eingabefeld mit einem v-model verwenden.

<input type="text" v-model="someData" v-uppercase="someData">

Wann immer ich in dieses Feld eingebe oder someData ändere, wird der Wert in Großbuchstaben umgewandelt.

Dies tat im Wesentlichen dasselbe, wie ich gehofft hatte, v-model="someData | uppercase" würde es tun. Aber das kannst du natürlich nicht.

Zusammenfassend: Machen Sie eine Direktive, die die Daten transformiert, nicht einen Filter .

8
james2doyle

Wenn Sie den Wert anfänglich erhalten, passen Sie ihn an die Eingabe an. Ich habe es in der ready-Funktion erhalten, aber Sie könnten dies auch nach Ihrem DB-Aufruf tun:

ready: function(){    
  var year = this.date.substr(0, 4);
  var monDay = this.date.substr(5,5);
  var result = monDay + "-" + year;
  this.date = result.replace(/-/g,"/");
}

Möglicherweise müssen Sie auf dem Weg zu Ihrer Datenbank auch etwas Ähnliches tun.

2
Jeff

So habe ich mit dem Watch-Callback einen Vue-Filter für ein V-Modell implementiert, der den Wert beim Laden nicht aktualisiert.

Vue.filter('uppercase', function (value) {
    return value.toUpperCase();
});

Die HTML:

<input type="text" v-model="someData">

Und der Rückruf der Uhr:

watch:{
   someData(val) {
       this.someData = this.$options.filters.uppercase(val);
    },
}
0
krchun

Gehen Sie zu main.js und fügen Sie den folgenden Code hinzu:

import moment from 'moment'
Vue.filter('myDate', function (value) {
    if (value) {
        return moment(String(value)).format('dd/mm/yyyy')
    }
});

Führen Sie in Ihrem HTML-Code Folgendes aus:

<label>Date</label>
<v-text-field :value="date | myDate" @input="value=>date=value"></v-text-field>
<p>{{ date | myDate 'dd/mm/yyyy' }}</p>

Deshalb haben wir oben v-bind verwendet, um den Wert und die Ereignisbehandlungsroutine @input zu binden, um die Funktionalität des v-Modells zu erhalten.

0
Samidjo