Vue.filter работает в первой версии и не работает во второй. Что не так?

Question

[Дима]

В демке прописан фильтр по замене символов, на первой версии vue отлично работает, а на второй возникает ошибка, что я делаю не так?

И второй вопрос: как лучше реализовать, чтобы замена символа происходила в том же окне, где пишется текст, а не дублировалась на другой элемент.

Заранее спасибо.

Answer 1

[0xD34F]

на второй возникает ошибка, что я делаю не так?

Пытаетесь использовать вырезанную фичу.

как лучше реализовать, чтобы замена символа происходила в том же окне

Используйте watch:

<textarea v-model="input"></textarea>

data: () => ({
  input: '',
}),
watch: {
  input(v) {
    this.input = v.split('1').join('2');
  },
},

Или слушайте событие input:

<textarea v-model="input" @input="onInput"></textarea>

data: () => ({
  input: '',
}),
methods: {
  onInput() {
    this.input = this.input.split('1').join('2');
  },
},

Comments

[Дима]

Еще раз спасибо :)

[Дима]

А в эту textarea как-то возможно поместить текст? В первой версии Vue, я мог сделать вот так <textarea>Text</textarea> и слово text отображалось согласно стилям. В вашей весрии такая конструкция не работает, ее как-то можно обойти не используя placeholder?

[0xD34F]

Дима Волков, а v-model вам на что? Задайте переменной input начальное значение, отличное от пустой строки - это и будет ваш текст.

[Дима]

0xD34F, да, но при клике текст нужно стереть, так как он играет роль обучающего. Если прописать на textarea @click="input = ''" то при каждом клике, будет стираться текст, а это очень тупо :) мне надо только по первому

[0xD34F]

Может, всё-таки стоит сделать плейсхолдер, а при фокусе делать его прозрачным? Типа так:

textarea:focus::placeholder {
  color: transparent;
}

<textarea v-model="input" placeholder="text text text ...">

[Дима]

0xD34F, не устану вас благодарить :) Скорее всего так и прийдется, главный минус, что в placeholder-е сложно с текстом с новой строки и пустыми строками. А текст который я хотел туда поместить,
будет именно с ними

[0xD34F]

Дима, почему сложно-то? Легко:

<textarea v-model="input" placeholder="text\n\ntext\n\ntext ...">

[Дима]

На Сафари так

[0xD34F]

Дима Волков, сафари не проверял. Ну, не повезло. В хроме, фаерфоксе и ie работает.

Лучше задайте отдельный вопрос, подробно описав, что вам надо. А то мы как-то уже сильно удалились от изначальной проблемы.

Answer 2

[Evgeny Kulakov]

1. В секцию data добавить переменную input
2. Убрать лишние {}