Блог

Главная - Вопросы по программированию - Как передать множественное значение с ключом в URL с помощью vue.js

Как передать множественное значение с ключом в URL с помощью vue.js

#laravel #vue.js #laravel-5 #vuejs2

#laravel #vue.js #laravel-5 #vuejs2

Вопрос:

У меня есть эти данные атрибутов

         for(var k = 0;k<this.form.fields.length;k  )
                    {
       
                        this.dynamic_fields.push({attribute_id:attributes[k].id,value: attributes[k].value})
                      
                    }

this.$router.push({ 
    path: '/api/search-temp',
    query:{
        attributes: this.encodedAttributes()                     
    }
});

    encodedAttributes() {
    const queryAttributes =this.dynamic_fields;
    if (queryAttributes) {
        return typeof queryAttributes !== "string"
            ? btoa(JSON.stringify(queryAttributes))
            : queryAttributes;
    }
    return "";
},

У меня есть идентификатор атрибута и значение атрибута, поэтому я хочу передать этот идентификатор и значение в url, чтобы я вызывал цикл в массиве атрибутов моего контроллера и получал идентификатор и значение :

 localhost:8000..?attributes[]['attribute_id_1']=attributevalue1amp;attributes[]['attribute_id_2']=attributevalue2...

Я перенаправляю вот так :

  this.$router.push({ path: '/search-list',query:
                    {

                     
                    }

Проблема в том, что я хочу передать этот многомерный массив в url, любой другой обходной путь для этого также высоко ценится

Ответ №1:

Что вы можете попробовать, так это упорядочить и закодировать объект в формате json перед передачей его в запрос $route

 function encodedAttributes() {
    const queryAttributes = this.$route.query.attributes;
    if (queryAttributes) {
        return typeof queryAttributes !== "string"
            ? btoa(JSON.stringify(this.$route.query.attributes))
            : queryAttributes;
    }
    return "";
}

function decodedAttributes() {
    const attributes = this.$route.query.attributes;
    if (typeof attributes === "string" amp;amp; attributes.length) {
        return JSON.parse(atob(attributes));
    } else {
        return attributes;
    }        
}

И передать в качестве параметров запроса в маршрут

 this.$router.push({ 
    path: '/search-list',
    query:{
        attributes: this.encodedAttributes()                     
    }

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

 class MyController extends Controller
{
    public function index(Request $request)
    {
        $request->attributes = is_array(
            $requestAttributes = json_decode(base64_decode($request->attributes), true)
        ) 
            ? $requestAttributes 
            : [];
        
        //Do other processing as needed
    }
}

Я использовал что-то подобное в одном из моих проектов, но сейчас не могу получить доступ к коду.

Вероятно, вы можете использовать функцию для экранирования символов Юникода в encodedAttributes , а также, decodedAttributes если это необходимо

 function escapeUnicode(str){
    return str.replace(/[^-~]/g, c => '\u'   ('000'   c.charCodeAt().toString(16)).slice(-4))
}

function encodedAttributes() {
    const queryAttributes = this.$route.query.attributes;
    if (queryAttributes) {
        return typeof queryAttributes !== "string"
            ? btoa(escapeUnicode(JSON.stringify(this.$route.query.attributes)))
            : queryAttributes;
    }
    return "";
}


function decodedAttributes() {
    const attributes = this.$route.query.attributes;
    if (typeof attributes === "string" amp;amp; attributes.length) {
        return JSON.parse(atob(escapeUnicode(attributes)));
    } else {
        return attributes;
    }        
}

Комментарии:

1. Спасибо, можете ли вы также указать в ответе, как и в каком формате я буду передавать данные в this.$route. запрос.атрибуты

2. Это то, что я показал в атрибутах ответа, может быть простым объектом javascript в компоненте vue. Что мы делаем, так это преобразуем объект attributes в строку JSON, а затем кодируем его, прежде чем отправлять его в this.$route

3. Вы можете инициализировать attributes в функции данных компонента Vue или метода. Затем вы можете изменить подпись encodedAttributes как function encodedAttributes(attributes = null){ const queryAttributes = attributes ? attributes || this.$route.query.attributes; //rest of the function declaration }

4. Я пытался, но получал url, подобный этому attributes= W3siYXR0cmlidXRlX2lkIjozLCJhdHRyaWJ1dGVfbmFtZSI6IlNlYXRzIiwidmFsdWUiOiI2In0seyJhdHRyaWJ1dGVfaWQiOjQsImF0dHJpYnV0ZV9uYW1lIjoiQ29sb3IiLCJ2YWx1ZSI6Ik90aGVyIn1d , и не получал атрибут, я отредактировал свой код в своем вопросе, можете ли вы, пожалуйста, проверить, в чем проблема в коде

5. Да, это закодированная строка, и вы можете легко декодировать ее в своем контроллере Laravel. Итак, в чем проблема — у этого URL есть какая-то неприятно выглядящая закодированная строка. Это не имеет значения, на самом деле это, вероятно, более предпочтительно с точки зрения безопасности

Ответ №2:

Вы пытаетесь установить вложенный объект в параметры запроса, это невозможно… объект запроса вашего маршрута должен быть плоским объектом.

Резюмируя единственный способ для вас иметь что-то подобное:

 ?attributes[]['attribute_id_1']=attributevalue1amp;attributes[]['attribute_id_2']=attributevalue2

Было бы из объекта запроса, подобного этому:

 query: {
  "attributes[]['attribute_id_1']": 'attributevalue1',
  "attributes[]['attribute_id_2']": 'attributevalue2',
}

Вы должны преобразовать этот многомерный массив в простой объект и использовать его в качестве объекта запроса.

Вот пример…
Из этого:

 const multiDimArr = [
  ['attribute_1', 'value1'],
  ['attribute_2', 'value2']
];

В:

 const myObject = {
  attribute_1: 'value1',
  attribute_2: 'value2'
}

Способ сделать это был бы:

 const multiDimArr = [
  ['attribute_1', 'value1'],
  ['attribute_2', 'value2']
];

const myObject = {};

multiDimArr.forEach(arr => {
  myObject[arr[0]] = arr[1];
});

А затем используйте объект в качестве объекта запроса, чтобы ваш URL-адрес выглядел следующим образом:

 ?attribute_1=value1amp;attribute_2=value2
Метки: