-1

Tenho um input text com sua respectiva model, porém preciso que uma parte desse valor seja fixa, por exemplo: /static/download.jpg a ideia é que o usuário só consiga alterar o texto que está depois de /static/.. mantendo essa parte fixa na model.

Tendei implementar uma regra no @input e @change mais não deu muito certo.. Alguma sugestão?

Obrigado!

Edit: Tentei uma implementação aqui com o evento @change no input.. mais em alguns momentos ele inclui mais de uma vez a / após o /static/, segue o trecho de código a seguir!

var initialModel1 = '/static/teste.jpg';
var initialModel2 = 'teste.jpg';
var initialModel3 = '';

function test(model) {

  if (model.indexOf('/static/') === 0) {
    model = `/static/${model.substr(8)}`;

    console.log(model)
    return;
  }

  if (model !== '') {
    model = `/static/${model}`;

    console.log(model)
    return;
  }

  model = `/static/`;
  console.log(model)
}

test(initialModel1);
test(initialModel2);
test(initialModel3);

1 Resposta 1

1

Você deve utilizar observadores para isso, veja:

html:

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

vuejs:

...
export default {
    data(){
        return {
            ...
            input:'/static/'
        }
    },
    watch:{
        input: function(value){
            return '/static/'.value
        }
    }
}

Obviamente meu exemplo é bem grosso e existem formas melhores de fazer como por exemplo prefixar isso com um tipo de inputgroup do bootstrap por exemplo e pegar só o que o usuário digita e presumir no backend que o que for inserido entra após o caminho... depende muito do resultado final. Como você foi genérico na dúvida eu respondi de forma geral mais para ilustrar o conceito.

Este link aqui pode lhe ser útil:

https://br.vuejs.org/v2/guide/computed.html#Dados-Computados-vs-Observadores

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .